The difference between sass/scss and less

I. What is SASS/SCSS and less?

Sass (syntactically Awesome stylesheets) is a dynamic style language, Sass syntax is the indentation syntax, more than CSS more than a number of functions (such as variables, nesting, operation, mixing (Mixin), inheritance, color processing, functions, etc.), easier to read.

What is the relationship between sass and scss?

Sass's indentation syntax, for the CSS front end of the web developer is not intuitive, and can not add CSS code to Sass inside, so Sass syntax has been improved, Sass 3 became SCSS (sassy CSS). Compatible with the original syntax, just substituting {} for the original indentation.

Less is also a dynamic style language.  CSS is given dynamic language characteristics, such as variables, inheritance, operations, functions. Less can be run on the client (ie 6+, Webkit, Firefox) or on the server (with node. js).

Two. Difference between sass/scss and less 1. The compilation environment is different

Sass installation requires a Ruby environment, is processed on the server, and less is required to introduce less.js to handle less code output CSS to the browser, can also use in the development process, and then compiled into a CSS file, directly into the project, there are Less.app, Tools such as Simpleless, Codekit.app, and online compile addresses.

2. Variable characters are different, less is @, and Scss is $, and the scope of the variable is not the same.

less-scope @color: #00c; /* Blue/#header {  @color: #c00,/* Red/  border:1px solid @color;  Lor /* Blue Border */}less-#header{border:1px solid #cc0000 After the scope is compiled;} #footer {border:1px solid #0000cc;} scss-scope $color: #00c; /* Blue/#header {  $color: #c00,/* Red/  border:1px solid $color;  Lor /* Blue Border */}sass-after compilation #header{border:1px solid #c00} #footer {border:1px solid #c00} We can see that the variables in less and scss vary with the scope.

　　

3. Output settings, less no output settings, SASS provides 4 output options: Nested, compact, compressed and expanded.

The style of the output style can have four choices, the default is nested

• Nested: Nested indentation of CSS code
• Expanded: expanded multiline CSS code
• Compact: A concise format of CSS Code
• Compressed: Compressed CSS Code

4.SASS supports conditional statements, can use if{}else{},for{} loops, and so on. And less does not support.

/* Sample Sass "If" statement */@if lightness ($color) > 30% {} @else {}/* sample Sass "for" loop */@for $i from 1 to 10 {  . border-#{$i} {    border: #{$i}px solid blue;  }}

　　

5. Referencing an external CSS file

The external file name referenced by Scss must begin with _, as shown in the following example: H1 H2 H3 where _test1.scss, _test2.scss, and _test3.scss files are set separately. File name If the underscore _ begins, sass will assume that the file is a reference file and will not compile it as a CSS file.

Source code: @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";//Post-compilation: h1 {  font-size:17px;} h2 {  FONT-SIZE:17PX;} h3 {  font-size:17px;}

　　

Less references to external files and @import in CSS are no different.

6.Sass and less tool libraries are different

Sass has the tool library compass, which simply says that the relationship between sass and Compass is somewhat like the relationship between JavaScript and jquery, and Compass is a SASS tool library. On the basis of it, a series of useful modules and templates are encapsulated, complementing the functions of sass.

Less has UI component library Bootstrap,bootstrap is a relatively well-known front-end UI component library in Web front-end development, and Bootstrap's style file part of the source code is written in lesser syntax.

Three. Summary

Sass, or less, can be regarded as a high-level language based on CSS, the purpose is to make CSS development more flexible and more powerful, sass function than less powerful, basically can be said to be a real programming language, less is relatively clear, easy to use, Requirements for the compilation environment are more lenient. Given that compiling sass to install Ruby, and that the Ruby website is not accessible at home, individuals are more inclined to choose less in their actual development.

The difference between sass/scss and less