小知识:用过CSS3的都知道,CSS3没有变量,也不支持任何逻辑脚本。随着需求的增加,Sass诞生,目的在于使样式支持逻辑脚本,使程序猿们更高效的写样式,Sass脚本经过编译后,最终会转换成.css文件。Sass脚本有两种格式,分别是.sass和.scss,这两种格式的区别在于:.sass不使用大括号和分号。由于.scss的写法与.css更加相似,所以通常我们都使用.scss格式
安装ruby:
原因:
sass依赖于ruby环境,所以装sass之前先确认装了ruby,安装ruby的作用在于:它可以安装和更新sass。ruby官网下载地址: http://rubyinstaller.org/downloads/,直接下载“WITH DEVKIT”的版本,亦或者在我的网盘下载(64位):链接:https://pan.baidu.com/s/1HeoCCkW4EQfw-wsnfT5zzg 提取码:5krf ,接着傻瓜安装。
安装后:
1.查看是否安装成功:
ruby -v
如能正确显示ruby版本号,表明安装成功。
2.安装gem源淘宝镜像:
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
(安装gem出现问题请戳:https://gems.ruby-china.com/)
3.打印安装gem:
gem sources -l
成功打印:*** CURRENT SOURCES ***
https://gems.ruby-china.com/
安装sass:
gem install sass
gem install compass
安装成功后,同样可通过sass -v检测是否安装成功,若能显示版本号则表示安装成功。
Sass编译:
这步是实现.scss向.css格式转换的关键。进入到编译文件所在的目录底下,编译命令如下:
sass input.scss output.css
如需实现动态编译(只要.scss改变就会马上编译成.css文件),编译命令如下:
sass --watch input.scss:output.css
如果是多文件编译,编译对象也可以是文件目录:
sass --watch aa:dd或者sass --watch aa:cc/output.css
编辑出来的文件有四种排版可配置,分别是nested、expanded、compact和compressed。以expanded为例,配置时只需在命令行末尾加入–style expanded即可。
sass --watch input.scss:output.css --style expanded