SASS- local file (Partial)

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

---

• 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 source files can be @importimported into other instruction Sass source files, the file is imported local files, local files to make it easier to write modular Sass.

If a directory is being monitored Sass program, all scss directory / sass source files will be compiled, but usually do not want the local file is compiled, because the local file is to be imported into other documents. If you do not want the local file is compiled, the file name can be (_) beginning with an underscore.

for example

Suppose we have a local file: _colors.scss, the file is imported into styles.scss file, then styles.scss will be compiled as styles.css.

_colors.scss contents of the file:

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

Use @importimport local files, styles.scss follows:

@import "colors";

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

Can be seen in the use of @importimport local files _color.scss, we omit the underscore and the extension, which is allowed.

CSS file contents after styles.scss compiled as follows:

body {
  color: orange;
  background: gold; }