文章标题

$nav-color:#f90; .nav {$width:100px;
width:$width; color:$nav-color;
}

• $nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它；

• $width这个变量定义在了 nav的规则块内，所以它只能在 nav 规则块内使用。

  $nav-color:#f90;
  $highlight-border:1px solid $nav-color;
  .border
  {
  border: $highlight-border;
  }          
  

• 变量的声明中也可以使用变量；

• 声明变量中既可以用中划线，也可以用下划线；

代码嵌套

   #footer{
    h1{
    color: black;
    }
    h4{
    background-color: red;
    }
    }       

编译后：

    #footer h1 {
        color: black; }
    #footer h4 {
         background-color: red; }

父选择器的标识符 &

article a 
{
    color:blue;
    &:hover 
    {
        color:red;
    }
} 

编译后

    article a 
    {
        color: blue; 
    }
    article a:hover 
    {
        color: red; 
    }

body.ie

#content 
{
    aside
    {
        color:red;
    }
    body.ie &{
        color:green;
    }
}

编译后：

    #content aside {
  color: red; }
body.ie #content {
  color: green; }

群组选择器

    .content 
{
    h1,h2,h3
    {
        color:red;
    }
}

**编译后：**

   .nav a, .aside a {
  color: red; }     

子组合选择器和同层组合选择器：>、+和~

> 子组合选择器, +同层相邻组合选择器, ~同层全体组合选择器

    article section {
  color: red; }        /*article 下的所有section*/

article > section {
  color: red; }       /*article下紧跟着的子元素中的section*/

    header + p { font-size: 1.1em }  /*header元素后紧跟的p元素*/

    article ~ article{border-top:1px solid red}  /*选择所有跟在article后的同层article元素*/

属性嵌套

    nav{
    border:{
        style:solid;
        width:1px;
        color:#ccc;
    }
}

编译后：

    nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; }

默认变量值

    $link-color:blue;
$link-color:red;
a{
    color:$link-color;
}

编译后：

    a {
  color: red; }    

反复声明一个变量是，后面的会覆盖前面的 **

default

    @import "100";
$border-color:red !default;
a{
    color:$border-color;
}

编译后：

        a {
  color: blue; }

default像css属性中 !important 标签的对立面，不同的是 !default 用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值

嵌套导入

.blue-theme 
{
    @import "100"
}

**编译后：**

    .blue-theme aside {
  background: blue;
  color: white; }

/**/被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式

三种会生成原生CSS@import的情况

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。
• 即**不能用**sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

混合器

    @mixin rounded-corners  /*混合器使用@mixin标识符定义*/
{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

notice
{
    background-color:green;
    border:2px solid #00a00;
    @include rounded-corners  /*通过@include来使用这个混合器*/
}

**编译后**

    notice {
  background-color: green;
  border: 2px solid #00a00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

混合器过度使用 会导致生成的样式表过大，导致加载缓慢
何时使用混合器 ：
* 你能否为这个混合器想出一个好的名字

混合器中的css规则

    @mixin no-bullets
{
    list-style:none;
    li
    {
        list-style-image:none;
        list-style-type:none;
        margin-left:0px;
    }
}

ul.plain
{
    color:#444;
    @include no-bullets;
}

编译后：

  ul.plain {
  color: #444;
  list-style: none; }
  ul.plain li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px; }

混合器传参

    @mixin link-colors($normal,$hover,$visited)
{
    color:$normal;
    &:hover
    {
        color:$hover;
    }
    &:visited
    {
        color:$visited;
    }
}
a{
    @include link-colors(blue,red,green);
}

a{
    @include link-color(
        $normal:blue;
        $visited:green;
        $hover:red;
        )
}

**编译后：**

    a {
  color: blue; }
  a:hover {
    color: red; }
  a:visited {
    color: green; }

默认参数值

    @mixin link-colors(
    $normal,
    $hover:$normal,
    $visited:$normal
)
{
    color:$normal;
    &:hover{color:$hover;}
    &:visited{color:$visited;}
}

a{@include link-colors(red)}

**编译后：**

    a {
  color: red; }
  a:hover {
    color: red; }
  a:visited {
    color: red; }

使用选择器继承来精简css

    .error{
    border:1px red;
    background-color:#fdd;
}
.error a{
    color:red;
    font-weight:100;
}
h1.error
{
    font-size:1.2rem;
}
.seriousError{
    @extend .error;
    border-width:3px;
}

**编译后：**

    .error, .seriousError {
  border: 1px red;
  background-color: #fdd; }

.error a, .seriousError a {
  color: red;
  font-weight: 100; }

h1.error, h1.seriousError {
  font-size: 1.2rem; }

.seriousError {
  border-width: 3px; }

继承的高级用法

@extend的两个要点：

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

推荐： http://www.sasschina.com/guide/

sublime设置监听格式
sass –watch test.scss:test.css –style expanded