Sass advantages:

More users, it is easier to find SCSS development, SCSS learning resources; Strong programming ability, support functions, lists, objects, judgments, loops, etc. More features than less; SCSS is used for Bootstrap/Foundation. Rich sass library: Compass/Bourbon;

Sass faults:

Installing Node-sass inside the company will fail. You need to use CNPM or install it manually

Less advantages

Can be run in the browser, theme customization function;

Less faults

Weak programming ability, does not directly support objects, loops, judgments, etc. The @variable variable name is easily confused with the @import/media/keyframes of the CSS. Mixin /extend syntax is weird; Mixin parameters are easily confused when encountering multiple parameters and list parameter values.

SASS is a CSS preprocessor, which in plain English is a style language that is syntactically compatible with CSS and adds features that CSS does not have. Ultimately, SASS has to be compiled to CSS to run

LESS

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand. Less can run on Node or in a browser.

Variables
These are pretty self-explanatory:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + # 111;

#header {
  color: @light-blue;
}
Copy the code
Mixins
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: # 111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}
Copy the code
Nesting
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {width: 300px; } = ="#header {color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}Copy the code
Operations
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
Copy the code

To be compatible with CSS, calc() does not evaluate mathematical expressions

Functions
@base: #f04615;@ width: 0.5; .class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }Copy the code

Less has a lot of built-in functions (image-size(“file.png”), image-width(“file.png”), etc. If @some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), darken(@some, 10%), black);
}
Copy the code
Scope
@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
Copy the code
Importing (Importing)

Imports work as you would expect. You can import a.less file and use all the variables in that file. If the imported file has the.less extension, you can omit the extension:

@import "library"; // library.less
@import "typo.css";
Copy the code