1. What is Sass/Scss and Less?
- Sass (Syntactically Awesome Stylesheets) is a dynamic style language. Sass grammar is an indentation grammar. It has more functions than css (such as variables, nesting, operations, mixing, inheritance, color processing, functions, etc.). Easier to read.
- Less is also a dynamic style language. CSS is endowed with dynamic language features, such as variables, inheritance, operations, and functions. Less can run on the client side (support IE 6+, Webkit, Firefox) or on the server side Run (with Node.js).
- What is the relationship between Sass and Scss?
Sass's indentation syntax is not intuitive for web developers who are used to writing CSS front-ends, and CSS code cannot be added to Sass. Therefore, the sass syntax has been improved, and Sass 3 becomes Scss (sassy css). It is compatible with the original syntax, but replaces the original indentation with {}.
2. What is the difference between Sass/Scss and Less?
Sass supports conditional statements, you can use if{}else{}, for{} loops and so on. Less does not support it.
The compilation environment is different
The installation of Sass requires a Ruby environment, which is processed on the server side, and Less needs to introduce less.js to process the Less code and output css to the browser. You can also use Less in the development process, and then compile it into a css file and put it directly into the project There are also tools such as Less.app, SimpleLess, CodeKit.app, and online compilation addresses.
Note: Both can be compiled with IDE editor, for example: Hbulilder, etc.
The processing mechanism of Less and Sass is different:
Less is processed by the client, and Sass is processed by the server. In comparison, Less parsing is slower than Sass.
Variables do not match
Less is @ and Sass is $, and the scope of the variable is different.
Sass has no local variables and satisfies the principle of proximity. Variables defined in {} in Less are local variables.
Less has no output settings, Sass provides 4 output options
There are four options for the style of the output style, the default is nested
nested: nested indented css code
expanded: expanded multi-line css code
compact: concise format css code
compressed: compressed css code