sass的使用

发表于 | 分类于

sass中文官网：https://www.sasscss.com/

1. sass的介绍

sass 是 css 的预处理器（css preprocessor）
它能够帮我们更快更高效的编写更好维护的css。自带很多原生 css 没有的功能，如变量（现在 css 中已经实现）、条件语句等.
与less的区别：
sass基于nuby  有很多扩展 大型项目略胜 开发底层样式(类似bootstrap）
less基于javascript 极简  用于项目内部

2. 文件后缀

sass 有两种后缀名文件：

后缀名: .sass不使用大括号和分号

1
2
3
4
5
body
  background: #eee
  font-size:12px
p
  background: #0982c1

后缀名: .scss和我们平时写的 css 文件格式差不多，使用大括号和分号。

1
2
3
4
5
6
7
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严格格式要求报错。

3. 编译

直接生成在命令行上

1
sass index.scss

编译到 css 文件：

1
sass test.scss test.css

.scss文件的注释没有编译到.css文件里

日常啰嗦：因为SASS是 Ruby 语言写的，但是两者的语法没有关系。所以要先安装ruby，之后在ruby的控制面板里输入gem install sass来安装sass。