Sass的一些基本概念包含不多，但是每一个概念都大大提高了效率，比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。 首先，Sass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号
Sass的一些基本概念包含不多，但是每一个概念都大大提高了效率，比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。
首先，Sass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。
请注意Sass使用两个空格定义嵌套的区别。
比如可用下方Sass：
#google_ad
width: 100%
height: 50px
display: block
padding: 5px
写成如下的CSS：
#google_ad {
width: 100%;
height: 50px;
display: block;
padding: 5px; }
再者，Sass共有两种注释风格：标准的CSS注释/* comment */，单行注释//
comment，均只保留在SASS原文件中，且编译后都会被省略。
接下来正式进入概念的说明：
1、变量（Variables）
在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。
下面举个例子，定义红色变量名为“red”，其变量值为“#ff4848”，两者之间通过“:”连接：
$red: #ff4848
其中Sass还内置了函数功能，例如变暗（darken）和变亮（lighten），可以让变量修改起来更有效率。
下面就以h1、p、span来举个例子：
$red: #ff4848
h1
color: $red
p
color: darken($red,10%)
span
color: lighten($red,20%)
而且还有个很神奇的功能，就是你可以在相同的变量中进行加减运算。当我们想使颜色变黑，可以做变量的基础上减一个十六进制的颜色，比如“#101”；同样的当我们想使得字号变大“10px”，我们也可以在字号变量的基础上加上这个值。下面举个例子：
$blue: #48AFFF
$fontsize: 12px
h2
color: $blue -#101
font-size: $fontsize + 10px
2、嵌套（Nesting 两种嵌套规则）
1）选择器嵌套：类似于HTML嵌套
举个例子：
$blue: #48AFFF
$fontsize: 12px
.floor1
.floor12
p
span
font-size: $fontsize
.floor12
h1
color: $blue
下面是上述Sass生成的CSS：
.floor1 .floor12 p span {
font-size: 12px; }
.floor1 .floor12 h1 {
color: #48afff; }
1）属性嵌套：相同前缀的属性，可进行嵌套，所有连字符的选择器均支持，让你少写一些重复的代码
举个例子：
$red: #ff4848
$blue: #48AFFF
#google_ad
border:
top: 1px solid $red
left: 1px solid $blue
上方例子中，因为先写了“border：”属性，然后断行空两格，写“top：”和“left：”属性，在CSS中就变成“border-top”和“border-left”属性了，下面请看上方例子生成的CSS：
#google_ad {
border-top: 1px solid #ff4848;
border-left: 1px solid #48afff; }
3、混合（Mixins）
其有三大特性：定义一整块Sass代码、定义参数、设置默认值。
下面先举个例子，然后再进行说明：
@mixin border-radius($amount: 5px)
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h1
@include border-radius
.baidu_ad
@include border-radius(2px)
font-size: $fontsize
上方代码中通过“@mixin”定义一整块代码，并以“border-radius($amount: 5px)”命名，其中“$amount:
5px”为定义的参数及默认值。
通过“include”可对定义块代码进行调用，在其后加上混合代码片段的名称，同时还可使用括号在其中设置参数。
然后其间在“.baidu_ad”中的“（2px）”可直接进行默认值的设定。下面再给出上面Sass代码转译成的CSS代码：
h1 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
.baidu_ad {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 12px; }
4、选择器继承（Extend）
选择器的继承可以让你的选择器继承另一个选择器的所有样式风格，通过“@extend”且在气候加上需要继承的选择器，那么这个选择器就会继承另一个选择器的所有样式。（继承和被继承的关系保留）
下面举个例子：
h1
color: red
.google_ad
@extend h1
fontsize: 12px
上方Sass代码中“.google_ad”通过“@extend”继承了“h1”的样式，然后其下的代码单独在一个选择器里呈现剩余代码，可对比生成的CSS代码：
h3, .google_ad {
color: red; }
.google_ad {
fontsize: 12px; }
