现在，只有类为container的直接子类才会获得样式。

css 中“>”是 css3 中特有的选择器**，A > B** 表示选择 A 元素的所有子B元素，与A B不同的是，A B 选择所有后代元素，为A > B只选择一代。

父选择器(&)

如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。

@mixin {insert name} {
     //write CSS code here
}

示例： 

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

由于历史原因，连字符和下划线被认为是相同的，也就是说@mixin mixin-name { } 和 @mixin mixin_name { } 是一样的。

用法

要在代码块中使用mixin，我们必须使用@include，然后接mixin的名称。

.button-green {  
    @include button;  
    background-color: green;  
}

这里通过@include调用我之前创建名为button的mixin模块，那么解析后的CSS就如下所示： 

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background-color: green;  
}

使用mixin的另一种方法是使用参数，就像 JS 中的函数一样，我们可以声明一个全局变量并将其设置为mixin的一个参数，这里更新了上面的button模块，增加了名为background的参数并将其传递给模块。 

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码： 

.button-green {  
    @include button(green);  
}

你可能会好奇如果在定义mixin时定义了参数，但是在@include调用时没有传递参数会发生什么。这种情况下你会收到一个编译错误的提示。同时我相信这种情况一定不是你想看到的。你可以通过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。 

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

现在如果你在调用的时候忘记传递参数值: 

.button-green {  
  @include button;  
}

你的代码将会使用你设置的参数默认值来解析，在这个例子中也就是green这个值。 

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

@function 函数名(形参) {
  @return;
}

使用时时直接使用 函数名即可: 

@function getWidth($w) {
  @return $w * 2;
}

.main{
  max-width: #{getWidth(20)}px;
}

编译后: 

.main {
  max-width: 40px;
}

具有控制流的条件样式

if()

if() 是 Sass 的一个内建函数，与之相似的 @if 则是一个内建指令。if() 用来做条件判断并返回特定值，示例如下：

@mixin test($condition) { 
  $color: if($condition, blue, red); 
  color:$color 
}
  
.firstClass { 
  @include test(true); 
} 
 
.secondClass { 
  @include test(false); 
}

编译结果： 

.firstClass {
  color: blue; 
} 
.secondClass { 
  color: red; 
}

在上例中，if() 函数内的三个参数分别代表：测试条件，测试成功返回值，测试失败返回值（除了 false 和 null 之外的所有测试条件都被视为测试成功）。如果使用数字作为上述示例的条件，同样会返回测试成功的值： 

.firstClass { 
  @include test(1); 
}

@if

@if 后跟一个表达式，如果表达式的结果为 true，则返回特定的样式，示例如下：

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { font-weight: bold;} 
} 

.txt1 { 
  @include txt(none); 
} 

.txt2 { 
  @include txt(bold); 
}

编译结果： 

.txt1 { 
  color: white; 
} 
.txt2 { 
  color: white; 
  font-weight: bold; 
}

@for $i from 1 through 4 { 
  .col-#{$i} { 
    width: 100/4 * $i + %;
  } 
}

.col-1 { 
  width: 25%; 
} 
.col-2 { 
  width: 50%; 
} 
.col-3 { 
  width: 75%; 
} 
.col-4 { 
  width: 100%; 
}