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



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载