“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

1. Learn about SASS

Sass is another way of writing CSS. It adds rules to CSS and encapsulates methods, making CSS code more reusable, clearer in structure, and easier to maintain

Install SASS

2.1 The first prerequisite is that NPM is installed. You can directly enter NPM I sass in the terminal of the project to install SASS

   $ npm i sass
Copy the code

2.2 Or use Window +R to open CMD and type in it

How to use SASS

How to use SASS

3.1 create

Start by creating a.sass or.scss file. Then you can start writing sASS code

3.2 build

   $ sass style.sass style.css 
Copy the code

Convert style.sass to style.css

Compilation provides four options

  • Nested: Nested indent CSS code, which is the default value

  • Expanded: Unindentation, expanded CSS code

  • Compact: CSS code in compact format

  • Compressed: compressed CSS code

     $ sass style.sass style.css --style compressed
Copy the code

3.3 introduced

Sass files cannot be directly imported into HTML, so an intermediate compilation process is required to import the compiled CSS files into HTML

4. SASS widget

4.1 installation

From the above point of view, every time you write SASS code and want to see the style change, you need to manually compile it once, and then you can see the change, which is really a bit of trouble, so there is a very user-friendly plug-in, Live Sass Compiler, which can compile sASS files in real time. As long as you save it will automatically compile into CSS files and save in the directory of the custom path, so that you do not have to modify a compile, solve the novice code is not familiar with the problem

That’s the second one, just install it

4.2 configuration

4.2.1 Open firstExtension set

4.2.2 Then opensettings.json

4.2.3 Then copy this code in

"LiveSassCompile. Settings. Formats:" [/ / extension {" format ": "Compact ",// Expanded, compact, compressed, nested "extensionName": ".min. CSS ",// compiler suffix "savePath": Null / / compile save path}], "liveSassCompile. Settings. ExcludeList" : ["/node_modules / * * * * ", "vscode / * *"].Copy the code

The code is available on sASS official website. For specific usage, please refer to sASS official website

4.2.4 Configuring a Path and file Name

"ExtensionName ": ".min.css",// Compiled file name extension "savePath": "/ CSS /post3" // Compiled file pathCopy the code

4.2.5 Enabling Live Sass Listening

To open VScode, press F1 or CTRL + Shift +P and enter Live Sass: Watch Sass

5. Use of SASS

5.1 variable

Sass most basic usage is variable, you can define a variable name and value, often used attributes can be set as variables, so that we can have two benefits, the value of the first if the need to change, you just need to change the set of variables, not a change, the second if the code a little more, we can reduce a lot of duplicate code, enhance reusability. And then we look down

5.1.1 Variable declaration and use

And CSS properties, just change the name of the property to a custom name, variable before the need to add $CSS

.box{background-color: #f39800}Copy the code

sass

 $background-color:#f39800
 .box{
      background-color：$background-color
      }
Copy the code

This may seem like more trouble, but it’s not. This is just an example of how variables can be declared and used, because a commonly used attribute in a real project can’t be used only once, and variables can be useful when it needs to be changed

  • Ps: There is a feature in variable naming that – and _ in variables can be converted to each other without distinction

5.2 Nesting Rules

Why is using SASS nesting rules one of the reasons it makes CSS code more structured, clearer, and easier to read

5.2.1 Nesting rules in the CSS

  .comment {
      background:#fff;
  }
  .comment .comment_content{
      margin: 0 auto;
  }
  .comment .comment_content p {
      text-align:center;
  }
Copy the code

For example, this is a nested layer, but it takes a long time to write this, and many of the first parts of the name are the same as the previous layer, but the _xxx after the change, sass is friendly to this.

5.2.2 Nested rules in SCSS

.comment{ background:#fff; &_content { //.comment_content margin: 0 auto; p { text-align:center; }}}Copy the code

In fact, for example, sass only needs to put the nested content inside the nested content, which has an ampersand. In the nesting rule, this ampersand represents the name of the upper layer, and the ampersand represents. Comment. The structure is much clearer, and with the addition of variables, you can save a lot of code.

This is the most basic nesting rule, followed by a combination of variables and mixers to see the benefits of SASS

5.3 the selector

5.3.1 Subcombination selectors>

> select the first immediately following child element (p for example)

5.3.2 Layer combination selector+

+ Select the first p element of the same class (adjacent) immediately following it (p for example)

5.3.2 Layer combination selector~

~ Select all p elements after the same layer (p as an example)

5.4 mixer

5.4.1 Definition of mixer

Mixin is like a function that has CSS properties and can pass in parameters, combined with variables. Mixin uses the @mixin identifier definition + the mixer name + (parameter optional) {theme sass code}

Often use a single line of text hidden, plus ellipsis, you can encapsulate it into a “function”, as long as the need to introduce the “function”, introduce the following…

$mixin one_row_hidden ($size:16px, $color:#666) {font-size: $size; color: $color; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }Copy the code

Ps: When do I need parameters? When a value or some value in this “function” may need to be changed in different scenarios, it can be changed in the form of a parameter. If it does not need to be changed, you can also set the default value for the parameter. When changing the value, use the default value without passing the parameter. ($size, $color) This is called with no default value and must be passed as an argument

5.4.2 References to mixers

$white:F00; @mixin one_row_hidden ($size:16px, $color:#666) {font-size: $size; color: $color; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blog_details { background-color: $white; P {@include one_row_hidden($size: 18px, $color: #323232)}}Copy the code

From the above you can clearly see the use of variables and mixers. Mixers are defined using @mixin, and mixers are introduced using @include

5.5 Reference between SASS

Sass files can be referenced to each other. Import “style.sass” is introduced using the import keyword. For example, defined variables and mixers can be placed in one SASS file, and then imported when other SASS files need to be used

@import "base.scss"; .Copy the code

Finish this chapter