sass

Posted 2021-10-11

SASS - 使用Sass程序

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

现在已经安装了Sass程序，接下来我们将创建一个Sass文件，然后使用Sass程序将其转换为css文件。

编写源文件

打开编辑器（任何代码编辑器都可以）创建一个名为styles.scss的文件，注意.scss扩展名。添加以下内容，然后保存文件。

styles.scss

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

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

这个文件经过sass程序编译后将生成如下的css文件：

styles.css

body 
  color: orange;
  background: gold; 

生成css文件

我们让Sass程序监测源文件改动，有任何改动重新生成css文件。

打开命令行工具，切换到styles.scss文件所在目录，执行以下命令:

sass --watch styles.scss:styles.css

这里指定了要监测的SCSS文件，以及要生成的CSS文件名。

不只是单个文件，也可以监测整个目录。

命令输出如下：

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

可以看到已经生成了styles.css文件。另外还有一个styles.css.map文件，这是一个json格式文件，记录了scss源文件到css文件的映射信息。

生成的styles.css文件内容如下：

body 
  color: orange;
  background: gold; 

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

可以看到生成的css文件只包含CSS代码，Sass源文件中设置的变量已经被处理了。

/*# sourceMappingURL=styles.css.map */表示映射文件是styles.css.map，映射文件记录了源文件到css文件的映射信息。

Sass代码说明

Sass文件中有2个变量，保存的是颜色值，然后我们使用这些变量来设置主体元素的前景颜色和背景颜色。

当代码被编译成CSS时，变量被编译为具体值。