CSS preprocessing Less and Sass summary

less is written based on nodejs

sass is written in ruby, and the node-sass package is used to solve the compilation problem

Variables in

less are defined in mixin@less. Block

use:

lessccommand to compile less files. Method:

"mixin" attribute can only be based on existing style rules! You can use class selector and id selector in mixin:

.a,#b{
    
    
    color: rebeccapurple;
}
.mixin-class{
    
    
    .a();
}
.mixin-id{
    
    
    #b();
}

Output:

.a,
#b {
    
    
  color: rebeccapurple;
}
.mixin-class {
    
    
  color: rebeccapurple;
}
.mixin-id {
    
    
  color: rebeccapurple;
}

Note that when calling mixin, parentheses are optional:

.a()  //此种写法和下面写法无区别
.a;

Mixin that does not output :

If you want to create a mixin, but you don't want the mixin to output in the generated css, you can add parentheses () after it:

.my-mixin{
    
    
    color: black;
}
.my-other-mixin(){
    
    
    background: wheat;
}
.class{
    
    
    .my-mixin;
    .my-other-mixin;
}

Output:

.my-mixin {
    
    
  color: black;
}
//此处并没有输出 .my-other-mixin
.class {
    
    
  color: black;
  background: wheat;
}

lessNeutral extend:

Here is a block called mixin:

If multiple places in less are quoted mixin:

Then there will be a lot of repetitive codes in the final generated css:

if there are a lot of mixinmiddle codes, then the final generated repetitive codes will be more, we obviously don’t want this,solution:

Use extend

Result: The
common style is extracted in one place a

separate style there

lessThe loopcycle

Look at an example, the principle is recursion: the

result:

less modular

Variables in sass use $

The mixinwording of sass is different from less:

First of all, sass mixinmust be displayed with a @mixindeclaration, and the other mixinname is not preceded by a dot. For example, here is
@mixin block, which cannot be written as @mixin
. The mixin in block Less looks like both a class and a mixin.

When using sass, you need to add@include

node-sassHow to use command-line compilation

sassIn, use extend like this:

sassThe loopcycle

sass writes a grid layout recursively. Note that sass is used for quoting variables #{$n}, and less is used for quoting variables.@{n}

but! ! ! ! ! ! ! ! ! ! ! ! ! ! !

In fact, sass doesn't have to be so troublesome, because sass supports for loops!

sass modular

to sum up:

CSS preprocessor framework