- 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时,变量被编译为具体值。