SASS简单总结

参考：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

一、介绍篇

SASS是一个前端工具，它定义了css的一种新的写法，让写css更加简单:符合SASS语法的css都放在.scss为后缀的文件中，然后通过命令将SASS语法的css编译为传统的css。

二、安装篇

首先要安装SASS，因为SASS是Ruby语言写的，windows平台下要安装 RubyInstaller 。

然后打开命令行：输入

gem install sass

三、语法篇

①内嵌规则

   
   

    
    

     
     //sass写法
    
    
    
    

     
     #main p{
    
    
    
    

     
         color:#eee;
    
    
    
    

     
         .redbox{
    
    
    
    

     
             color:#000000
    
    
    
    

     
         }
    
    
    
    

     
     }
    
    
    
    

     
     
    
    
    
    

     
     //编译后
    
    
    
    

     
     #main p{
    
    
    
    

     
     	color:#eee;
    
    
    
    

     
     }
    
    
    
    

     
     #main p .redbox{
    
    
    
    

     
     	color:#000000
    
    
    
    

     
     }
    
    
   
   

②引用 父类

   
   

    
    

     
     //SASS写法
    
    
    
    

     
     a{
    
    
    
    

     
       background:black;
    
    
    
    

     
       &:hover{background:red;}
    
    
    
    

     
     }
    
    
    
    

     
     //编译后
    
    
    
    

     
     a{
    
    
    
    

     
       background:black;
    
    
    
    

     
     }
    
    
    
    

     
     a:hover{background:red;}
    
    
   
   

③内嵌属性

   
   

    
    

     
     //SASS语法
    
    
    
    

     
     .funy{
    
    
    
    

     
       font:{
    
    
    
    

     
         family:fantasy;
    
    
    
    

     
         size:30em;
    
    
    
    

     
         weight:bold;
    
    
    
    

     
       }
    
    
    
    

     
     }
    
    
    
    

     
     //编译后
    
    
    
    

     
     .funy{
    
    
    
    

     
        font-family:fantasy;
    
    
    
    

     
        font-size:30em;
    
    
    
    

     
        font-weight:bold;
    
    
    
    

     
     }
    
    
   
   

③注释

SASS支持常规的注释比如：

/*块注释*/

//单行注释

编译后：单行注释会去掉

四、使用篇

命令行输入：

sass input.scss output.css

这个sass编译后会将input.scss转换为outpu.css

如果要实时更改实时编译使用如下命令:

sass --watch input.scss:output.scss

如果要实时监听整个文件夹的更改实时编译使用如下命令：

​sass --watch app/sass:public/stylesheets

会监听app/sass下面的所有.scss为后缀的文件，并会将编译后的文件放到 public/stylesheets