Before introducing the difference between less and sass, let's first understand their definitions:
1. What are Less, Sass/Scss?
1. Less:
It is a dynamic style language. CSS is endowed with dynamic language features, such as variables, inheritance, operations, and functions.
Less can run on both the client side (supporting IE 6+, Webkit, Firefox) and the server side.
2. Sass:
It is a dynamic style language. Sass syntax belongs to indentation syntax. It
has more functions than css (such as variables, nesting, calculation, mixing (Mixin), inheritance, color processing, functions, etc.), and is easier to read.
What is the relationship between Sass and Scss?
The indentation syntax of Sass is not intuitive for web developers who are accustomed to writing CSS front-ends, and they cannot add CSS code to Sass. Therefore, the syntax of Sass has been improved, and Sass 3 has become Scss (sassy CSS). Compatible with the original syntax, just replace the original indentation with {}.
2. The similarities between less and sass
Less and Sass have some commonalities in grammar, such as the following:
1. Mixing (Mixins)—class in class; 2. Parameter mixing—class that can pass parameters,
just like a function; Assignment - Use JavaScript expression assignment in CSS.
3. The difference between less and sass
The main difference between Less and Sass is their implementation.
Less is based on JavaScript and is processed on the client side.
Sass is Ruby based and is processed on the server side.
The only difference between Less and Sass about variables is that Less uses @ and Sass uses $.
4. Summary
Both Sass and Less
can be regarded as a high-level language based on CSS.
Its purpose is to make CSS development more flexible and powerful.
Sass is more powerful than Less, and it
can basically be said to be a real programming language.
Less is relatively clear, easy to use, and has relatively loose requirements for the compilation environment.
5. Extended thinking
What difference does the processing mechanism make?
Because the processing mechanism of Less and Sass is different,
the former is processed by the client, and
the latter is processed by the server.
In comparison, the former will parse js slower than the latter.