【02】SASS与SCSS

SASS语法

SASS语法也称之为SASS的缩进语法，其目的是担供一个更简洁的语法。对于一些人来说，更多的是基于于CSS的美学吸引力，用SASS来代替SCSS语法。

SASS语法和CSS语法不一样，他不是使用大括号{}和分号;来分隔块的样式，它使用的是类似于HAML语法，使用缩进和换行来分块，而不是使用分号来分隔语句。这通常会省去大量的篇幅，也缩小了文件大小。

每个在SASS中语句，属性声明和选择器必须放在自己的线上。换句话说，选择器和样式的声明不用大括号{}区分，但必须分行书写。

选择器

    属性：属性值

同样的，我们有一段CSS代码：

.container {
    width: 960px;
    margin: 0 auto;
}

 

其对应的SASS代码如下：

 .container
    width: 960px
    margin: 0 auto

 

在SASS语法中，有多个选择器时，每个选择器必须在一个行，而且用逗号,分隔。简单点说，一个选择器占一行，而且相邻两个选择器之间使用,分开：

.user #userTab,
.posts #postTab
    width: 100px
    height:30px

 

我们简单来看一个SCSS、SASS和CSS三者之间语法的对比示例：

SCSS

$blue:#3bbfce;              
$margin:16px;           
.container{         
    border-color:$blue;    
    color:darken($blue,9%);  
}                           
.border {                   
    padding: $margin / 2;    
    margin: $margin / 2;   
    border-color: $blue;  
}

 

SASS

$blue:#3bbfce             
$margin: 16px            
.container
    border-color:$blue
    color:darken($blue,9%) 
 
.border
    padding: $margin / 2
    margin: $margin / 2 
    border-color: $blue  

 

编译出来的CSS

.container {
    border-color: #3bbfce;
    color: #2b9eab;
}
.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}

 

就我个人而言，我推荐使用SCSS，因为它似乎更具可读性。从外表看，SCSS和CSS几乎是一样的。

 

**