Detailed explanation of CSS pre-compiled languages ​​and their differences

1. What is

As a markup language, CSS has a relatively simple syntax and low requirements for users, but it also brings some problems

It is necessary to write a lot of seemingly illogical code, which is not convenient for maintenance and expansion, and is not conducive to reuse. Especially for non-front-end development engineers, it is often difficult to write well-organized and easy-to-maintain CSS code due to lack of CSS writing experience.

CSS preprocessor is the solution to the above problems

Preprocessing language

Expanded the CSS language, added features such as variables, mixins, functions, etc., making CSS easier to maintain and convenient

Essentially, preprocessing is a superset of CSS

Contains a set of custom syntax and a parser. According to these syntaxes, you can define your own style rules. These rules will eventually be compiled by the parser to generate the corresponding CSS files.

2. What are they

There are three excellent precompiled processors in the front end of the CSS precompiled language, namely:

• sass
• less
• stylus

sass

Born in 2007, it is the earliest and most mature CSS preprocessor. It has the support of the Ruby community and Compass, the most powerful CSS framework. At present, it has evolved into Scss, which is fully compatible with CSS, influenced by LESS.

The file suffix is ​​.sass and scss. You can strictly follow the indentation method of sass and omit the curly braces and semicolons.

less

Appeared in 2009, it is greatly influenced by SASS, but uses the syntax of CSS, making it easier for most developers and designers to get started. It has far more supporters than SASS outside the Ruby community.

Its disadvantage is that it lacks programmable functions compared to SASS, but its advantages are simplicity and compatibility with CSS, which in turn influenced the evolution of SASS to the era of Scss.

stylus

Stylus is a CSS preprocessing framework. It was created in 2010 from the Node.js community and is mainly used to provide CSS preprocessing support for Node projects.

So Stylus is a new language that can create robust, dynamic and expressive CSS. It is relatively young and essentially does the same thing as SASS/LESS etc.

3. Difference

Although various preprocessors are powerful, the most commonly used ones are the following:

• variables
• Scope
• Code mixins
• Nested rules
• Modules

Therefore, the following will expand on these differences

Basic Use

less and scss

.box {
  display: block;
}

sass

.box
  display: block

stylus

.box
  display: block

Nesting

The nesting syntax of all three is the same, even the & tag that references the parent selector is the same

The only difference is that Sass and Stylus can be written without curly braces.

less

.a {
  &.b {
    color: red;
  }
}

variable

Variables undoubtedly add an effective way to reuse CSS, reducing the repetitive "hard coding" that was originally unavoidable in CSS.

The variables declared by less must start with @, followed by the variable name and variable value, and the variable name and variable value need to be separated by a colon:

@red: #c00;

strong {
  color: @red;
}

Variables declared in sass are very similar to those declared in less, except that the variable names are prefixed with @.

$red: #c00;

strong {
  color: $red;
}

There is no limitation on variables declared by stylus. You can use $ at the beginning and a semicolon at the end. It is optional, but = is required between variables and their values.

In stylus we do not recommend using the @ symbol to start variable declarations

red = #c00

strong
  color: red

Scope

The Css precompiler assigns variables a scope, which means they have a life cycle. Just like js, it will first look for variables in the local scope, and then in the parent scope.

There are no global variables in Sass

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

After compilation

.scoped {
  color:white;/* is white*/
  background-color:blue;
}
.unscoped {
  color:white;/*white (no global variable concept)*/
}

Therefore, it is best not to define the same variable name in Sass

The scope of less and stylus is very similar to that of javascript. First, they will search for locally defined variables. If they are not found, they will search down level by level until they reach the root, just like bubbling.

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

After compilation:

.scoped {
  color:white;/*white (local variable is called)*/
  background-color:blue;
}
.unscoped {
  color:black;/*black (global variable is called)*/
}

Mixin

Mixin is one of the most essential functions of preprocessors. Simply put, Mixins can extract some styles and define them as separate modules, which can be reused by many selectors.

You can define variables or default parameters in Mixins

In less, mixed usage means introducing another defined Class into the defined ClassA, and can also pass parameters, the parameter variable is @ declaration

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

After compilation

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

When declaring mixins in Sass, you need to use @mixinn, followed by the name of the mixin, and you can also set parameters. The parameter name is the variable $declaration format

@mixin large-text {
  font:
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

Mixins in Stylus are slightly different from the previous two CSS preprocessor languages. They can declare Mixins names directly without using any symbols, and then use an equal sign (=) to connect the defined parameters and default values.

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Call error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Call error mixins and set the value of parameter $borderWidth to 5px */
}

Code modularity

Modularization is to divide the CSS code into modules

The usage of scss, less and stylus are as follows

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

References

https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

This is the end of this article about Css pre-compiled languages ​​and their differences. For more relevant Css pre-compiled languages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!