Sass and Less difference?

This article answers the following questions for novice developers of front-end reference.

1, what is Sass and Less?

2. Why use CSS preprocessor?

3, Sass and Less comparison

4. Why did you choose to use Sass instead Less?

What is Sass and Less?

Sass and Less CSS preprocessor belong to, what is it CSS preprocessor do?

CSS preprocessor defines a new language, the basic idea is to use a specialized programming language for programming CSS adds some features, the CSS file is generated as a target, then developers will just use this language to encode work of CSS.

Converted into plain words, " specifically in a programming language, style of Web page design, and then converted to normal CSS file by the compiler to use for the project ."

Why use CSS preprocessor?

As a front-end developers, we all know, Js can be custom variables, and CSS is just a markup language, not a programming language, and therefore can not be custom variables, and so can not be quoted.

CSS has several specific following disadvantages:

Grammar is not strong enough, such as writing can not be nested, leading to the development of modular need to write a lot of choices duplicate device;
No reasonable style variable and reuse mechanism, such that the associated value to be repeatedly output in the form of logic literals, making it difficult to maintain.

This leads to a lot of us no reason to increase the workload on the job. CSS preprocessor used, providing style layer multiplexing mechanism CSS missing reduce redundant code, style code to improve maintainability. Greatly improving our development efficiency.

However, CSS preprocessor is not snake oil, CSS has the advantage of simplicity, to be used anywhere and debugging. Precompiled CSS steps to join, so we developed a workflow more links, debugging becomes more trouble. The bigger question is, precompiled descendant selectors likely to result in abuse.

So we measure the precompiled programs in the actual project, still have to think about than to bring additional maintenance overhead, CSS pre-processor has not been resolved more trouble.

Compare Sass and Less of

the difference

1, Less Sass relatively simple environment

Cass installation need to install Ruby environment, Less based on JavaScript, is necessary to introduce Less.js to handle css code output to the browser, can also be used in the development of links Less then compiled into css files, directly on the project, there are less. app, SimpleLess, such tools CodeKit.app, but also online editing address.

2, Less Sass use relatively simple

LESS CSS does not cut the original features, but on the basis of the existing CSS syntax for adding CSS properties procedural language. As long as you understand the basic CSS can be very easy to use.

3, starting from the function, Sass slightly stronger than some of Less

①sass there are variables and scope.
- $ variable, like PHP;
- # $ {variable} like Ruby;
- global and local variables of the points, and has priority.

②sass concept of function;
- @function and @return and function parameters (as well as variable parameters) allows you to develop that package like js logic you want.
- @ mixin similar function but lacks the function of programming logic, more is to improve the reusability and modularity css code segment, the person with the most.
-ruby provides a very rich set of built native api.

③ Process Control:
- Condition: @if @ else;
- Loop through: @for @each @while
- Inheritance: @extend
- quote: @import

④ Data Structure:
- Type List = $ array;
- $ = Object Type Map;
remaining there string, number, function type, etc.

4, Less and Sass handling mechanism is not the same

The former is handled by the client, which is processed by the server, compared resolved under the former than the latter will be a little slower

5, the only difference with respect to variables in Less and Less Sass is in use @, Sass with $.

In common

Less and Sass some similarities in syntax, such as those below:

1, mixed (Mixins are) - in class class;
2, mixing parameters - the parameters of the class can be passed, like function;
3, nested rule --Class nested class, thereby reducing code duplication;
4 , spend the mathematical calculation --CSS;
5, color capabilities - edit the color;
6, namespace (namespace) - grouping style, which can be invoked;
7, scope - local modification of the style;
. 8, the JavaScript assignment - an assignment expression using JavaScript in the CSS.

Why did you choose to use Sass instead Less?

1, Sass in the market there are some mature framework, such as Compass, and there are many frameworks are also using Sass, for instance Foundation.

2, it is discussed in the heat of foreign, Sass definitely better than LESS.
3, on learning tutorial, Sass tutorial better than LESS. In the tutorial is focused on domestic LESS LESS Chinese official website, while Sass Chinese tutorial slowly in the country is also more common.

4, one of Sass CSS preprocessor is mature, and there is a stable, strong team in maintenance.

5, as well as Scss of sass grammar was modified, Sass 3 becomes Scss (sassy css). The syntax is compatible with the original, except {} replace the original indentation.

6, bootstrap (Web Framework) latest version 4, use is Sass.