The advent of precompilers

The main reason is that CSS has several disadvantages:

  • No variables.
  • Nesting is not supported.
  • Poor code reuse.
  • Weak programming ability.

Basic usage

Less:
@contentBG:red;
.centerBox{
    color:@contentBG;
}

Sass:
$contentBG:red;
.centerBox{
    color:$contentBG;
}

Stylus:
contentBG = red;
.centerBox
    color contentBG;
Copy the code

As you can see, the syntax of less and sass is basically the same, except for the notation used to define variables. Stylus, on the other hand, doesn’t need to define symbols and is more like Python’s concise syntax.

scope

Less: @ color: red; .centerBox { color: @color; } @color: black; .leftBox { color: @color; } /* Compiled CSS*/. CenterBox {color: black; } .leftBox { color: black; }Copy the code

The scope of less is different from the other two. If the same variable definition occurs, the value of the last one is used. That is, the last one overwrites the previous one. This feature is useful when using less libraries. If you want to customize some properties of the library, you can override them without causing conflicts. However, there are some pitfalls: if different component libraries or class libraries use the same variable name, there will be overwriting, so modular approach should be adopted.

Sass: $color: red; .centerBox { color: $color; } $color: black; .leftBox { color: $color; } Stylus: color = red. CenterBox color color = black. LeftBox color color /* Two compiled CSS*/. CenterBox {color: red; } .leftBox { color: black; }Copy the code

Sass and Stylus use the previously recently defined variables. Both also provide a workaround for customizing styles by overwriting the value of a variable, using! Default.

Sass: $a: 1; $a: 5 ! default; $b: 3 ! default; $a = 1, $b = 3 Stylus: A = 1 a := 5 b = 3Copy the code

It means that if this variable didn’t exist before, I’m going to use the value that I’m defining.

Nested selectors and properties

less:
@position:center;
@prop:background;

.@{position}-box{
    @{prop}-color:red;
}

sass:
$position:center;
$prop:background;

.#{$position}-box{
    #{$prop}-color:red;
}

stylus:
position = center
prop = background

.{position}-box
    {prop}-color red
Copy the code

Mixins and inheritance

mixin

Less:
.mixin-style(@color:red){
    color:@color;
}

.content{
    .mixin-style(red);
}

Sass:
@mixin mixin-style{
    color:red;
}

.content {
    @include minxin-style;
}

Stylus:
mixin-style(color)
    color color
  
.content
    mixin-style red
Copy the code

inheritance

Stylus/Sass
.box{
    backgroundColor:red;
    height:180px;
    width:200px;
}

.centerBox{
    @extend .box;
    color:black;
}

Less:
.box{
    backgroundColor:red;
    height:180px;
    width:200px;
}

.centerBox{
    &:extend(.box);
    color:black;
}
Copy the code

Stylus and sass are inherited via @extend, while less is inherited via pseudo-classes.