CSS Preprocessor Less SASS SCSS stylus

Let's ask ourselves the question why do we need a preprocessor?
The answer, of course, is that CSS is inherently flawed:

The syntax is not strong enough for nested writing, resulting in no clear style logic in the project.
There is no variable or logical reuse mechanism, and when code needs to be reused, the writing style can only be repeated, making it difficult to maintain.
To deal with the above problems, CSS preprocessors are born. The popular ones are Sass, Less, and Stylus. Their common features are:

Variables: Improve code reuse.
Sass: Declare variables with "$" and separate variable names and values with colons
Less: uses @ to declare variables
Stylus: "equal sign" connection between direct variable name and variable value.
scope
Sass: Its way is the worst of the three, there is no concept of global variables
Stylus and Less: It works in a similar way to JS, looking up variables step by step
Nesting: For CSS, nesting is the perfect way to express logic.
All three are treated the same here, using ampersand to indicate the parent element

Second, the sass
Use in Webpack:

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. That is, any standard CSS3 style sheet is a valid SCSS file with the same semantics. In addition, SCSS recognizes most CSS hacks (CSS tricks) and browser-specific syntax. So SCSS is equivalent to CSS3 of SASS. Sass runs in Ruby, but our development environment is generally based on Node development, so we need to install node-sass to provide the environment, install sass-Loader to translate SASS and SCSS to CSS.