现在已经安装了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时,变量被编译为具体值。

05-11 20:01