Features and differences of less and sass

Both are CSS preprocessors. It is an abstraction layer on CSS. They are a special grammar / language compiled into CSS.

1、Less:

It is a dynamic style language. CSS is given dynamic language features, such as variables, inheritance, operations, functions.

Less can be run on the client (supports IE 6+, Webkit, Firefox) or on the server.

Why use them?

The structure is clear and easy to expand.
Can easily shield the browser private syntax differences. Needless to say, this encapsulates repeated processing of browser syntax differences, reducing meaningless mechanical labor.
Multiple inheritance can be easily achieved.

2、Sass:

Is a dynamic style language, Sass grammar is indented grammar,

There are more functions than css (such as variables, nesting, operation, mixing, inheritance, color processing, functions, etc.), which is easier to read.

What is the relationship between Sass and Scss?

Sass's indented syntax is very unintuitive for web developers who are used to writing CSS front-ends, and can't add css code to Sass, so the sass syntax has been improved, and Sass 3 has become Scss (sassy css). Compatible with the original syntax, except that the original indentation is replaced with {}.

Second, the similarities between less and sass

Less and Sass have some similarities in syntax, such as the following:

1. Mixing-classes in class;
2. Mixing in parameters-classes that can pass parameters, just like functions;
3. Nesting rules-nesting classes in Class to reduce duplication of code;
4 , Operation-use mathematics in CSS;
5, color function-can edit color;
6, namespace-grouping style, so that it can be called;
7, scope-partially modify the style;
8, JavaScript Assignment-Use JavaScript expression assignment in CSS.

Third, the difference between less and sass

The main difference between Less and Sass is their implementation.

Less is based on JavaScript and is handled on the client side.
Sass is based on Ruby and is processed on the server side.

The only difference between variables in Less and Sass is that Less uses @ and Sass uses $.

 

 

Published 203 original articles · praised 8 · 10,000+ views

Guess you like

Origin blog.csdn.net/z591102/article/details/105533149