sass/scss学习笔记

sass是旧版本的预处理语言，scss增加了css3的一些特性，并且支持css的拼写规则，也就是{}跟；

mac：

首先是安装sass，先检查系统是否有ruby，在终端输入“ruby -v”，没有Ruby的话，可以用brew安装，不详说了。

有Ruby的情况下，打开终端，输入“sudo gem install sass”，这里需要等待大约一分钟，如果安装失败，大多数可能是被墙了，翻墙的方法自己找，然后再重复上面的命令。

查看是否安装成功：在终端输入sass -v，成功了会有以下

新建文件test.scss，输入$color:#fff;body{color:$color;}，在终端进入test所在的文件夹，输入“sass --watch test.scss:test.css”，打开test.css查看是否编译成功

sass可以自己定义变量，语法格式我就不说太多了

scss跟sass主要区别可以从以下图片看出来：

sass有以下三种编译命令

单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：sass sass/:css/

以上方法每次文件有变动都需要重新运行命令进行编译，太过麻烦，可以使用watch命令进行自动检测：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

例子：sass --watch test.scss:test.css

还有Grunt以及Gulp的方法，但是我还没了解过。

scss还可以用不同的风格输出：

各种风格可以自己尝试一下，不过项目要上线还是推荐压缩输出，代码格式如下：

sass --style compressed(风格) --watch releaseMsg.scss:releaseMsg.css

sass可以在浏览器中调试： sass --watch --scss --sourcemap style.scss:style.css

sass 的默认变量仅需要在值后面加上 !default 即可

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

定义在元素外的是全局变量，定义在元素内的是局部变量。尽量在变量有复用的时候定义变量，不要为了定义变量而定义变量。