Less Sass preprocessor and

What is the CSS preprocessor

Using a specialized programming language for web-style encode, and then compiled into a normal css files, css he be extended, the extra features than a lot of css, such as variables, nested, mixed inheritance.

less grammar

(1) variable

less allows developers to custom variables, variables can be used in global style, the style variables make it easier to modify.

@color: #4D926F; 
#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
}

(2) Mixins (mixed) with code reuse

Many dynamic languages ​​support Mixins characteristics, it is an implementation of multiple inheritance, the less, the mixed refers to the introduction of another class has been defined in a class, just to add a property as in the current class.

less file

// define a style selector 
.roundCorners (@radius: 5px) {
     -moz-border- RADIUS: @radius; 
     -webkit-border- RADIUS: @radius; 
     border - RADIUS: @radius; 
} 
// Additional styles the selector used 
#header { 
    .roundCorners; 
} 
the #footer { 
    .roundCorners (10px); 
}

After compiling the generated css file

#header { 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
#footer { 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
}

Mixins actually a nest, which allows a nested class using another class, the class may also be referred to as a nested variable.

(3) nested rule

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
}

Nested rule of writing is less the corresponding DOM structure, so our stylesheet writing more compact and better readability, while nested rule so that the operation of the pseudo-element easier.

{A 
     Color: Red; 
     text - Decoration: none; 
      &: hover { // when & parsing the same element or pseudo-class of this element, the element is not a descendant of & parsing 
          Color: Black; 
          text - Decoration: underline; 
    } 
 }

 

　　Less Sass and both belong css preprocessor, functionally similar, similar procedures are used in the manner of writing CSS language, have a variable, mixed, nested, inheritance characteristics, the ultimate goal is to facilitate writing CSS And maintenance.

 

Cons: needs to be compiled into css, is an additional overhead.