What are Sass and Less?
Both sass and less are CSS preprocessors.
CSS preprocessing defines a new language. The basic idea is to use a specialized programming language to add some programming features to CSS, use CSS as a target to generate files, and then developers only need to use this language to perform CSS coding work. In layman's terms, it means "using a specialized programming language to design the Web page style, and then convert it into a normal CSS file through a compiler for use in the project."
Why use CSS preprocessors?
CSS is just a markup language, not a programming language, so you cannot customize variables, reference, etc.
CSS has the following specific disadvantages:
The syntax is not powerful enough, for example, it cannot be nested, resulting in the need to write many repeated selectors in modular development;
Without variables and a reasonable style reuse mechanism, logically related attribute values must be repeatedly output in the form of literals, making it difficult to maintain.
This resulted in an unreasonable increase in workload at work. The use of CSS preprocessors provides the style layer reuse mechanism missing in CSS, reduces redundant code, and improves the maintainability of style code. Greatly improve development efficiency.
However, CSS preprocessors are not a panacea. The advantage of CSS is that it is easy to use and debug anytime and anywhere. The addition of the pre-compiled CSS step adds an extra link to our development workflow and makes debugging cumbersome. The bigger problem is that precompilation can easily lead to the abuse of descendant selectors.
The difference between Sass and Less
the difference:
- Less environment is simpler than Sass
The installation of Sass requires the installation of a Ruby environment. Less is based on Javascript. Less.js needs to be introduced to process the code and output css to the browser. You can also use Less in the development process, then compile it into a css file and place it directly in the project.
- Less is easier to use than Sass
Less does not tailor the original features of CSS, but adds procedural language features to CSS based on the existing CSS syntax.
- Sass is more powerful than Less
1. Sass has variables and scopes
2. Sass has the concept of functions
3. Process control
Conditions, loop traversal, inheritance, reference
4. Data structure
Array, map
- Less and Sass processing mechanisms are different
The former is processed through the client, and the latter is processed through the server. In comparison, the parsing of the former will be slower than the latter.
The only difference between variables in Less and Sass is that Less uses @ and Sass uses $
.
Less and Sass have some syntax in common, such as the following :
1. Mixins - classes within classes;
2. Parameter mixins - classes that can pass parameters, just like functions;
3. Nesting rules - nest classes within classes, thereby reducing duplicate code;
4 , Operations - mathematics used in CSS;
5. Color function - you can edit colors;
6. Namespace - group styles so they can be called;
7. Scope - locally modify styles;
8. JavaScript Assignment – Using JavaScript expressions to assign values in CSS