Sass and less, excellent front-end style Preprocessor

As a member of the graph cutting field, or rolling in the front-end field for a period of time, you will slowly find that the current css writing cannot meet your own efficiency. If you have a more powerful framework that makes your css more flexible and easier to reuse and maintain, that would be nice. Obviously, this is nothing new. sass and less are two excellent style preprocessors, which can greatly improve your efficiency. Next we will talk about them.

1. Style Preprocessor Definition

The style Preprocessor is simply a new language used by tech experts to allow css compilation to have various variables and attributes. After you write them according to its syntax, You can compile them, generate the corresponding css file. Of course, these processors make your css more concise, easy to understand, and more portable and maintainability.
In the front-end field, such as Sass, LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, and dt css are all style preprocessors mentioned above. I will not describe them here. I will only talk about sass and less.

2. sass and less: sass has appeared in the past and present of SASS in 2.1 to 08 years. It is an extension of CSS3 (stacked style sheet) syntax, it can use functions such as nesting, blending, and selecting sub-inheritance to write Stylesheet more efficiently and elastically. In the end, Sass will compile and translate valid CSS for browsing. That is to say, its syntax is not very easy for the browser to recognize (although it is similar to the CSS syntax, it is almost the same ), because it is not a standard CSS format, dynamic variables can be used in its syntax, so it is more like a Very Simple Dynamic Language.
2.2 less is a dynamic cascade style table language designed by Alexis Sellier. LESS is open-source, and its first version is written in Ruby. However, in subsequent versions, Ruby is gradually replaced with JavaScript. Benefiting from JavaScript, LESS can be run on the client (IE6 +, Webkit, Firefox), or on the server (Node. js, Rhino ). LESS is similar to CSS. A valid CSS code segment is also a valid LESS code segment. LESS provides the abstract mechanism required for general programming, such as variables, nesting, mixing, operators, and functions.
3. Comparison of frameworks
3.1 different implementation methods

The main difference between LESS and Sass is their implementation method. LESS is based on JavaScript and is processed on the client. However, Sass is Ruby-based and is processed on the server.

Many developers do not choose LESS because the JavaScript engine requires additional time to process code and then output modified CSS to the browser. However, the LESS environment is simpler than the Sass environment, which also makes LESS choice for many children's shoes.

3.2 syntactically, Sass and LESS both use standard CSS syntax. Sass uses the ". scss" extension, while LESS uses the ". less" extension. 3.2.1 The variable Sass declares that the variable must start with "$", followed by the variable name and variable value, and the variable name and variable value must be separated by a colon.

$a: 14px;$b: #000;$C: solid.btn{  width: $a;  border: 1px $C $b;}

LESS declaration variables are similar to Sass declaration variables. The difference is that the "@" character is used before the variable name:

@a: 14px;@b: #000;@C: solid.btn{  width: @a;  border: 1px @C @b;}

3.2.2 nesting (the Class is nested in the class to reduce repeated code)

body {  padding: 5px;  .head{    height: 10px;    a {      color: #000;      &:hover {        text-decoration: underline;      }    }  }} 

SASS and LESS are basically the same in the nested syntax, simple and fast. 3.2.3 mixed into the style Preprocessor, you can use a variable to define a piece of frequently used code, and then reference it for other styles, which is convenient and fast. This is mixed in. In SASS,

@mixin aq($borderWidth: 1px) {  border: $borderWidth solid #F00;}.btn {  padding: 5px;  @include aq(2px);}

In LESS,

.aq($borderWidth: 1px) {  border: $borderWidth solid #F00;}.btn {  padding: 5px;  .aq(2px);}

3.2.4 inheritance and blending are similar. In SASS,

.a {  margin: 10px 5px;  padding: 2px;}.b{  @extend .a;   border: 1px solid #000;}

In LESS,

.a {  margin: 10px 5px;  padding: 2px;}.b{  .a;   border: 1px solid #000;}

3.2.5 color functions the color functions are built-in color functions in the CSS pre-inner. These functions can process the color values, it is easy to deal with changing colors, such as brightening, darkening, and gradient colors.
For example, in SASS,

Invert ($ color);/* returns the reversed color of $ color */lighten ($ color, 50% ); /* The returned color is 50% x/saturate ($ color, 50%) based on $ color./* The returned color is increased by 50% x/desaturate ($ color, 50%);/* The returned color is based on $ color, and the saturation is reduced by 50% */grayscale ($ color);/* The returned gray color of $ color */darken ($ color, 50% ); /* The returned color is dimmed by 50% based on $ color */

In LESS,

Invert (@ color);/* returns the reversed color of @ color */lighten (@ color, 50% ); /* The returned color is 50% x/saturate (@ color, 50%) based on @ color./* The returned color is increased by 50% x/desaturate (@ color, 50%);/* The returned color decreases saturation by 50% */grayscale (@ color) based on @ color;/* The returned gray color of @ color */darken (@ color, 50% ); /* The returned color is dimmed by 50% Based on @ color */

3.2.6 operations

.a{  padding: (100px/2);  top: 10px + 100px;  left: 100px - 50px;  top: 10 * 10;}  

In fact, there are still many details. I will try again later when I have time.

Author: Alone
Antroduction: Senior front-end development engineer
Sign: there is no failure in life, only success in life.