SCSS安装与常用语法

1.去http://ruby.taobao.org/下载

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.监控指定的某个文件：

　　.比如说html文件夹scss下面的ie.scss要被监控

　　scss --watch scss/ie.scss:css/ie.css 

 

SCSS语法介绍：

1.  Variables (变量): scss的变量与JS的相似以$开头：例如右边的SCSS生成后的CSS

 2. Nesting(嵌套)：scss选择器的嵌套功能减少了很多重复的代码，你如果是这么写.那就是你已经意识到你在写一组你能控制的结构了 

 

3. mixin(混入)：@mixin 类似JS写好的一个函数, @include是调用一个写好的函数。例：

4. extend(继承)：@extend可以让一个选择器继承另一个选择器的属性 ;

5. SCSS生成动态选择器语法：如图

 完！！！！！！