Preface:

  • Css itself is not a programming language. It can be used to style web pages, but it cannot be programmed. It is simply a line of attribute descriptions that are cumbersome to write and difficult to organize and maintain

  • Naturally, some people began to wonder if they could add programming elements to CSS like any other programming language, so that CSS could do some preprocessing like any other programming language. And that’s what we call a CSS Preprocessor.

  • Scss is a new syntax introduced by SASS3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of SASS

  • Scss and SASS are the same thing, can be understood as an upgrade, a version of it, with some new features, usually called SASS

    Difference:

    • The file name extension is.sass and.scSS

    • Syntax writing is different. Sass is written with strict indented rules, without braces and semicolons. Scss writing is similar to CSS writing syntax

The three frameworks are compared in terms of syntax, variables, nesting, Mixin, inheritance, import, functions and operators

1, grammar

  • By default, the extension.scss is used for Scss and.less is used for Less
/* style.scss or style.less */
  h1 {
    color: #ffc 
  }

Copy the code
  • Sass is written with strict indented rules (no curly braces and semicolons)
/* style.sass */
  h1
    color: #ffc
Copy the code
  • Stylus supports more syntax diversity and uses the.styl extension by default
/* style.styl */
  h1 {
    color: #ffc;} /* omit curly braces */ h2 color:#ffc;/* omit the colon and semicolon */ h3 color#ffc
Copy the code

2, the variable

  • Sass/Scss variables must start with $, and the variable name and value are separated by colons
$redColor: red;
$borderWidth: 1px;
 
a {
  color: $redColor;
  border: $borderWidth $redColor solid;
}
Copy the code
  • Variable names for Less start with the @ sign
@redColor: red;
@borderWidth: 1px;
 
a {
  color: @redColor;
  border: @borderWidth @redColor solid;
}
Copy the code
  • Variables declared in the Stylus style have no qualification

You can start with a “$” sign, separate variable values with colons, Spaces, and end with a semicolon (;). Optional, but an equal sign (=) between the variable name and the variable value is required

If we declare (0.22.4) variables starting with an “@” sign, the Stylus compiles, but the corresponding value is not assigned to the variable. That is, do not declare variables starting with an “@” sign in Stylus

redColor = red;
borderWidth = 1px;
a {
  color: redColor;
  border borderWidth @redColor solid
}
Copy the code

The three different CSS preprocessors written above all end up producing the same knot

a {
  color: red;
  border: 1px red solid;
}
Copy the code

3, nested

  • In CSS we write hierarchical styles
header {
  margin: 10px;
}
header nav {
  height: 30px;
}
header nav a {
  color: #ccc;
}
header nav a:hover {
  color: red;
}
Copy the code
  • CSS preprocessors are much more convenient, and all three support nested writing
header {
  margin: 10px;
  nav {
    height: 30px;
    a {
      color: #ccc;&:hover { color: red; }}}}Copy the code

4, mixed with (Mixins)

  • Scss mixed with
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;} .generic-error { @ include error(); /* Scss mixed with */}. Login-error {@include error(5px); /* Scss add 5px*/}Copy the code
  • Less with
@mixin error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  .error(); /* Less混入 */
}
.login-error {
  .error(); /* Less混入 5px*/
}
Copy the code
  • The Stylus with
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  error();
}
.login-error {
  error(5px);
}
Copy the code

Eventually they will all compile to the following CSS style:

.generic-error {
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  border: 5px solid #f00;
  color: #f00;
}
Copy the code