scss

 选择器嵌套

header &表示header作为nav的父集

& header表示header作为nav的子集

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

属性嵌套

.box {
  font: {
   size: 12px;
   weight: bold;
  }  
}

伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

混合宏

定义一组错误信息样式

@mixin error($borderWidth:2px){
 border: $borderWidth solid #f00; color: #f00; 
}

调用error样式

.generic-error {
 @include error();/*直接调用error Mixins*/ 
}
 .login-error {
 @include error(3px);/*调用error Mixins，并将$borderWidth参数重定义为3px*/ 
}

 

转载于:https://my.oschina.net/u/3373019/blog/1528759