Less, Sass, and SCSS are all CSS preprocessing languages (and their file extensions) with more powerful syntactic capabilities than CSS.

Pre-processor language usage is: pre-processor language for development, webpack and loader tools to transfer CSS (Cascading Style Sheets) to the browser when packaging goes live.

Details:

  1. Suffix: Syntactically Awesome StyleSheets (SASS) before version 3.0, and SCSS after version 3.0

  2. Syntax specification:

    Sass has no {} and; , has strict indentation specification;

    The indentation specification of SCSS and CSS is the same

In our actual development process, SCSS is commonly written

Basic syntax of SCSS:

1. You can use $to identify variables (you can mark commonly used styles as variables, which can be reused later, convenient maintenance)

$highlight-color: #f40;
$basic-border: 1px solid black;

#app {
    background-color: $highlight-color;
  	border: $basic-border;
}  
Copy the code

2. Nested syntax (same as less syntax)

<div id="app">
    <div class="container">container</div>
</div>
Copy the code
// SCSS syntax $highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $highlight-color; border:$basic-border; .container{ font-size:30px; }}Copy the code

3. & parent selector (same syntax as less)

Suppose you want to set it for a particular child element

$highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $highlight-color; border:$basic-border; .container{ font-size:30px; } a{ color:blue; &:hover{ color: red; }}}Copy the code

4. The modular

You can define the variables you want in a new JS file, and import the style file you want to use

@import './base.scss'; $highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $base-color; border:$basic-border; .container{ font-size:30px; } a{ color:blue; &:hover{ color: red; }}}Copy the code

When using SCSS as your style, it should not be used directly in HTML pages (because browsers only support CSS). There is an extension in VSCode called Easy Sass that automatically transfers Sass files or SCSS files to a CSS file

Salute to my every day as a coder!!