SASS - use program Sass

Copyright Notice: Copyright, without permission prohibited reproduced! https://blog.csdn.net/weixin_43031412/article/details/91361279

---

• SASS - Introduction
• SASS - environment to build
• SASS - use program Sass
• SASS - Syntax
• SASS - variable
• SASS- local file (Partial)
• SASS - Mixed (Mixin)
• SASS - @extend (inherited) Directive
• SASS - Operators
• SASS - Functions
• SASS - Output format

---

Sass is now the program is installed, then we will create a Sass file, and then use the program to convert it to Sass css file.

Preparation of the source file

Open the editor (can be any code editor) to create a file named styles.scss, pay attention to .scssthe extension. Add the following, and then save the file.

styles.scss

$primary-color: orange;
$secondary-color: gold;

body {
  color: $primary-color;
  background: $secondary-color;
}

This document was generated by the compiler will sass css file as follows:

styles.css

body {
  color: orange;
  background: gold; 
}

Generate css file

We let the program monitor Sass source file changes, any changes to rebuild the css file.

Open a command line tool, to switch to the directory styles.scss file, execute the following command:

sass --watch styles.scss:styles.css

This specifies to be monitored SCSS file, and you want to generate CSS file name.

Not just a single file, you can also monitor the entire catalog.

Command output is as follows:

> sass --watch styles.scss:styles.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write styles.css
      write styles.css.map

I can see has been generated styles.css file. There is also a styles.css.map file, which is a json file format, recording scss source file mapping information to the css file.

Generated content styles.css file as follows:

body {
  color: orange;
  background: gold; }

/*# sourceMappingURL=styles.css.map */

Css can see the generated file contains only CSS code, Sass variable set in the source file has been processed.

/*# sourceMappingURL=styles.css.map */It shows a map file is styles.css.map, map file records the source file mapping information to the css file.

Sass Code Description

Sass file has two variables, save the color value, and then we use these variables to set up the main elements of the foreground and background colors.

When the code is compiled into CSS, it is compiled for a particular variable value.