LESS CSS

Leaner CSS

What is LESS

Dynamic stylesheet language
Influenced by Sass and has influenced the newer "SCSS" syntax
Compile to CSS

Implement LESS

Include less JavaScript file in code

<link rel="stylesheet/less" type="text/css" href="demo.less"/>
<script type="text/javascript" src="Less/less-1.6.2.min.js"/>

Variables

Define with at sign (@) and done with a colon (:)

@myVariable: Red;

@myVariable: 10px;

@myVariable: Arial;

@myVariable: 1.0em;

@myVariable: 1px Solid Black;

LESS

CSS

@myBackgroundColor: Red;
Body {        
    Background-color: @myBackgroundColor;
}

Body {    
    Background-color: Red;
}

Variable in SASS

$link: red;
.container {
   a {
      color: $link;
   }
}

Operations

Allow operation like addition, subtraction, division and multiplication
Used to create complex relationships between properties

Font-size: 4px + 10; //14px

Font-size: 5px * 4; //20px
      
Color: #FFF / 4; //#404040
  
Width: (100%/2) + 10%; //60%

Operators in SASS

SASS allows standard arithmetic operations and automatically convert units

Width: 3in + 20px;

Width: 3.013243in;

Output CSS:

Special case of Division in SASS

 Font: 16px/24px;  => stays the same (as used for font size and line height)

$height: 500px;

Height: $height / 5;  => 100px

Width: 1000px / 5;  =>1000px / 5

Width: (1000px / 5);  => 500px

Width: 1em + 3em * 5;  => 16em

Width: (1em + 3em) * 5;     => 20em

String Operations in SASS

Using plus sign (+)

Button:before {
    Content: “Quote ” + string;  => “Quoted string”
    Font-family:  sans- + “serif”;  => sans-serif
}

Functions in LESS

Functions map one-to-one with JavaScript code, allowing manipulation of values

@color: hsl(30%, 40%, 50%);
Color: lighten(@color, 10%);
Color: darken(@color, 10%);
Color: saturate(@color, 10%);
Color: desaturate(@color, 10%);
Color: fadein(@color, 10%);
Color: fadeout(@color, 10%);
Color: fade(@color, 10%);
Color: spin(@color, 10%);
Color: mix(@color, 10%);

Functions in LESS

@hue: hue(@color);

@sat: saturation(@color);

@light: lightness(@color);

@alpha: alpha(@color);

@rnd: round(3.14);

@top: ceil(3.14);

@bot: floor(3.14);

@per: percentage(.14);

Functions in SASS

Do some math with the variable and return some value

$default-font-size: 16;

@function global-margin($fs) {
    @return ($fs * 1.5) * 2 + px;
}
p {
    Margin-bottom: global-margin($default-font-size)
}

p {
    Margin-bottom: 48px;
}

Equivalent CSS

Mixins

Embedding all of the properties of a class into another class by including the class name as one of it properties
Allow for more efficient clean code repetitions
Feel like functions but insert more than one name/value pair

Mixins

.roundCorners(@size: 4px)  { //here 4px is default value
    border-radius: @size;
    -moz-border-radius: @size;
    -webkit-border-radius: @size;
}
#inputText {
    .roundCorners(15px)    
}

Mixins in SASS

Group of CSS declaration, passing value and ultimately display the CSS declaration throughout the site

@mixin border-radius($radius: 10px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.container {
    @include border-radius;
}
.newtable {
    @include border-radius(20);
}

Mixins within a Mixin in SASS

@mixin large-font {
    Font-size: 150%;
}

@mixin bond {
    @include border-radius;
    @include large-font;
}

.bondbox {
    @include bond;
}

.bondbox{
    border-radius : 10px; 
    font: 150%
}

Equivalent CSS

Mixins with variable argument in SASS

@mixin box-shadow($args…){
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
}

.box { 
    @include box-shadow(0 0 3px #333, inset 5px 5px 5px red); 
}

Nested Rules

Allowing nesting of selectors inside other selectors
Hierarchies imply the cascading/specificity

CSS

LESS

Div {
    font-size: 14px;
}
Div ul {
    list-style-type: none;
}
Div ul li {
    margin: 2px;
}

Div {
    font-size: 14px;
    ul {
        list-style-type: none;
        li {
            margin: 2px;
        }
    }
}

CSS

LESS

a {
    text-decoration: none;
}
a: hover {
    text-decoration: underline;
}

a {
    text-decoration: none;
    &: hover {
        Text-decoration: underline;
    }
}

Combination (&) to mix parent

Nesting in SASS

.container ul { 
    Do Some Stuff 
}
.container ul li { 
    Do Some More Stuff 
}
.container ul li .link { 
    Some Cool things here 
}

.container {
    ul {
        Do some stuff
        li {
            Do some more stuff
            .link
            Some cool things here
        }
    }
}

Equivalent CSS

Nesting properties in SASS

.hero-unit{
  font: {
      family;
      size; 
      weight;
  }
  border: {
      right; 
      bottom;
  }
}

.hero-unit { 
    font-family; 
    font-size; 
    font-weight; 
    border-right; 
    border-bottom
}

Importing

@import "myStyle.css" or @import "myLessStyle" (if don't specify extension, by default its .less)

@import in SASS

Import .scss and .sass files
Output will be merged into one single CSS file and all variables and mixins defined in the imported files will be available in the main file
Split your styles into smaller files defining specific elements
Easy to append or edit the code

Scoping

@size: 12px;
#form {
    @size: 20px;
    .myText {
          Font-size: @size; //here font size will be 20px and not 12px
    }
}

Variables and mixins are scoped

Which is better ?

SASS (1)

Sass is coded in Ruby, and is processed server-side

Sass needs to be installed through the Terminal or Command Prompt

Compass is an all-in-one package to do web development with Sass

LESS (1)

Less is a JavaScript library and processed client-side

LESS is as easy as linking JavaScript library to your HTML document

LESS also has several extensions

SASS (2)

LESS (1)

nav {  
    margin: 50px auto 0;  
    width: 788px;  
    height: 45px;  
    ul {  
        padding: 0;  
        margin: 0;  
    }  
}

nav {  
    margin: 50px auto 0;  
    width: 788px;  
    height: 45px;  
    ul {  
        padding: 0;  
        margin: 0;  }
border: {  
    left: {  
      width: 4px;  
      color: #333333; }
    right: {  
      width: 2px;  
      color: #000000;  }
      }
}

Sass takes this method a step further by allowing us to also nest individual properties

Nesting rule is good practice to avoid writing selectors repeatedly

SASS (3)

LESS (1)

@mixin border-radius ($values) {  
    border-radius: $values;  
}  
nav {  
    margin: 50px auto 0;  
    width: 788px;  
    height: 45px;  
    @include border-radius(10px);  
}

.border(@radius) {  
    border-radius: @radius;  
}  
nav {  
    margin: 50px auto 0;  
    width: 788px;  
    height: 45px;  
    .border(10px);  
}

Use the @mixin directive

Define it with class selector

SASS (3)

LESS (1)

.circle {  
    border: 1px solid #ccc;  
    border-radius: 50px;  
    overflow: hidden;  
}  
.avatar {  
    @extend .circle;  
}

.circle, .avatar {  
  border: 1px solid #ccc;  
  border-radius: 50px;  
  overflow: hidden;  
}

SASS (4)

LESS (1)

Both Sass and LESS can do basic math operations, but sometimes they return different results

Sass will also let you perform math on "unknown" units, making it a bit more future proof should some new unit come along before they are able to update

$margin: 10px;  
div {  
    margin: $margin - 10%; 
    /* Syntax error: Incompatible units: 
    '%' and 'px' */  
}

@margin: 10px;  
div {  
    margin: @margin - 10%; /* = 0px */  
}

LESS assumes that the first unit in the statement throughout and hence calculates the result based on a single unit

SASS (4)

Slightly off with where the error is. It said that the error is on line 7, instead of 6

LESS (2)

With the same error scenario, LESS notification is well-presented and it also appears to be more accurate