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生成动态选择器语法:如图

 完!!!!!!

  

 

posted on 2012-12-18 17:42  adine  阅读(3544)  评论(0编辑  收藏  举报