Vue advanced (MAO Qilu) : CSS precompiled languages Sass, Scss, Less and Stylus

The three most popular preprocessors are Sass, Less, and Stylus.

• SASS: Born in 2007, the earliest and most matureCSS preprocessorwithThe ruby communityThe support andcompassThis is the most powerfulCSS framework.SassUse the default.sassExtension.

Sass now has two sets of syntax rules: one still uses indentation as a separator to distinguish blocks of code; Another set of rules (affected by LESS) uses curly braces ({}) as delimiters like the CSS. The latter syntax is also known as SCSS (SCSS uses the.scss extension by default) and is supported in versions after Sass3.

• LESS: Appeared in 2009, bySASSThe influence is larger but also usedCSSSyntax for most developers and designers easier to use inThe ruby communityOutside supporters far outnumberSASSIts disadvantage is that compared withSASSThe programmable features are not enough, but the advantages are simplicity and compatibilityCSSAnd the other way aroundSASSevolvedSCSSThe Times, the famousTwitter BootstrapIs to useLESSDo the underlying language,LessUse the default.LessExtension.

According to Wikipedia, LESS is Alexis Sellier’s open source project inspired by Sass. At the time, SASS used indentation as a separator to distinguish blocks of code, rather than the curly braces ({}) commonly used in CSS. To make CSS easier for existing users, Alexis developed LESS and provided CSS-like writing capabilities.

• StylusBorn in 2010Node.jsCommunity, mainly used to giveNodeThe projectCSSPre-processing support, which has a certain constituency within this community, is not at all popular in a broad senseSASSandLESS.StylusUse the default.stylExtension.

Stylus is described as a revolutionary new language that provides an efficient, dynamic, and usable expression to generate CSS for use by browsers. The Stylus supports both indentation and CSS regular style writing rules.

Preprocessor syntax generally includes:

• variable
• nested
• Mixed Mixins
• operation
• Import (Import)
• function

/* the Scss variable must be $start */
$mainColor: # 000;
h1{
  color: $mainColor;
}

/* 2, Less variable names start with the @ sign */
@mainColor: #000;
h1{
  color: @mainColor;
}

Do not start the variable name in Stylus with @; = assign */ to the Stylus
mainColor = # 000;
h1{
  color: mainColor;
}
Copy the code

Mixins are one of the most powerful features of the CSS preprocessor language. In simple terms, Mixins can be used repeatedly by many selectors by pulling out styles as individually defined modules.

If you’re writing a CSS style, you’ll have to repeat it multiple times. In CSS preprocessor language, you can define a Mixin for these common CSS styles and then call your Mixin directly where your CSS needs to use those styles. This is a very useful feature, Mixins are treated as a recognized selector, and you can also define variables or default parameters in Mixins.

The CSS precompilation tool allows you to apply existing class and ID styles to a different selector. Such as:

/*Scss, less */
.circle{
  border-radius: 100%;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle
}
.big-circle{
  width: 100px;
  height: 100px;
  .circle
}
/*Stylus Mixin hybrid syntax */
circle{
  border-radius: 100%;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  circle
}
.big-circle{
  width: 100px;
  height: 100px;
  circle
}
Copy the code

/* this is SCSS example 1. Change to less, just change $to @2. To change Stylus, just change circle to circle, : to = */
.circle($radius:5px){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle
}
/* This is a sample Stylus */
circle($radius=5px) {border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  circle
}
Copy the code

CSS preprocessor variables in language and other languages, can realize the value of reuse, it also exists the life cycle, which is the Scope (variable Scope, developers used to call it Scope), the simple point is the concept of local variable or a global variable, find the variable sequence is to find in local definition first, if you cannot find, Then look up the superior definition, all the way to global. Let’s use a simple example to explain the scope usage of these three CSS preprocessors.

The scope in LESS is very much the same as the scope in other programming languages. It first looks for a locally defined variable, and if it doesn’t find one, it bubbles down to the root. In the same example above, let’s see what it does under LESS.

/ * LESS style * /
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}	
Copy the code

Translated CSS styles:

.scoped {
  color:white;/* White (local variable called) */
  background-color:blue;
}
.unscoped {
  color:black;/* Black (global variable called) */
}	
Copy the code

Sass, Less, and Stylus all offer a wealth of built-in functions. Stylus allows for custom functions, so look them up when you use them.

Sass (Scss), Stylus supports circular statements

• Sass website
• LESS website
• The Stylus’s official website