The paper

Sass/Scss and Less are CSS preprocessors, and we can think of them as the advanced syntax of CSS

  • Sass/Scss 在 CSSOn the basis of the syntax, advanced functions such as variables, nested rules, mixins and inline imports are added
  • Less 在 CSSSyntax is based on the addition of variables, mixins, functions and other features

Difference between Sass and Scss

  • SassIt is written with strict indentation syntax, using indentation instead of curly braces without semicolons
  • ScssIs in theSassSyntax based compatibilityCSSThe writing of

Sass syntax

$primary-color: #FF0000 div width: 30% color: $primary-colorCopy the code

Scss grammar

// Define variables
$primary-color: #FF0000;

div {
  width: 30%;
  color: $primary-color;
}
Copy the code

Sass/Scss and Less

Compile environment

  • SassInstallation requirements forRubyThe environment is handled on the server side
  • LessIs the introduction ofless.jsTo deal withLessPost code outputcssTo the browser,LessCan run onNodeOr browser side

Partial syntax (variable characters, conditional statements)

  • variableLessIs @SassIs $
  • SassSupport the use ofifConditions andforLoop statement,LassDoes not support

Sass syntax

// Define variables
$primary-color: #FF0000;

div {
  @if 1 + 1= =2 { border: 1px solid $primary-color; }
  @if 5 < 3 { border: 2px dotted $primary-color; }
  @if null  { border: 3px double $primary-color; }}Copy the code

The compiled

div {
  border: 1px solid $primary-color;
}
Copy the code

Less grammar

@nice-blue: #5B83AD;
@light-blue: @nice-blue + # 111;

#header {
  color: @light-blue;
}
Copy the code

The compiled

#header {
  color: #6c94be;
}
Copy the code

References external CSS files

If you do not want to generate a.css file with the same name during compilation, the file name must start with an underscore (_). If the file name starts with an underscore (_), Sass will consider the file as a reference file and will not compile it as a CSS file with the same name

Output Settings and tool libraries

  • SassFour output options are available:nested.compact.compressed 和 expandedAnd theLessNo output Settings
  • SassThere are tools libraryCompass.LessThere are UI component librariesBootstrap

reference

Sass Chinese official website

Less Chinese official website