2. 安装ruby
3.安装成功
4.在ruby环境下安装sass,操作如下:"gem install sass"
5.SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
例如:sass --style compressed test.sass test.css
6.让SCSS监控CSS,两种用法,操作:
1.监控一个SCSS文件: scss --watch scss:css
在命令行用CD命令进到要操作的文件夹 ,比如说是e:\adine\html
要CD 到html文件夹scss --watch scss:css 如图:
每次打命令行是一件很麻烦的事情,为了快捷可以建一个后缀名为.bat的文件,操作:
要操作的文件夹如e:\adine\html,在HTML文件夹里面新建一个名为current_watch_scss.bat的文件。在这个文件里面加上
scss --watch scss:css
这样每次双击这个文件夹,就会自动监控CSS文件了
2.监控指定的某个文件:
SCSS语法介绍:
1. Variables (变量): scss的变量与JS的相似以$开头:例如右边的SCSS生成后的CSS
2. Nesting(嵌套):scss选择器的嵌套功能减少了很多重复的代码,你如果是这么写.那就是你已经意识到你在写一组你能控制的结构了
3. mixin(混入):@mixin 类似JS写好的一个函数, @include是调用一个写好的函数。例:
4. extend(继承):@extend可以让一个选择器继承另一个选择器的属性 ;
5. SCSS生成动态选择器语法:如图
完!!!!!!