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 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
定义在元素外的是全局变量,定义在元素内的是局部变量。尽量在变量有复用的时候定义变量,不要为了定义变量而定义变量。