sass

变量声明 $color:#FFFFFF; $fancybox-width: 400px !default;
嵌套

#id {
    h1{color:#000000;}
    .red{background: #8F8F94;font-size: 14px;}
}
#id h1{color:#000}
#id .red{background:#8f8f94;font-size:14px}

父选择器标识符 &

article a {
  color: blue;
  &:hover { color: red }
}
article a{color:#00f}
article a:hover{color:red}

群组嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
.container h1, .container h2, .container h3 {
  margin-bottom: .8em; }

属性嵌套

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
nav {
  border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px; }

导入style.scss文件
@import "style"
混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
@mixin test($b:0){
    .margin#{$b}-t{margin-top:#{$b}px;}
    .margin#{$b}-r{margin-right:#{$b}px;}
    .margin#{$b}-b{margin-bottom:#{$b}px;}
    .margin#{$b}-l{margin-left:#{$b}px;}
    .margin#{$b}{margin:#{$b}px;}
    .padding#{$b}-t{padding-top:#{$b}px;}
    .padding#{$b}-r{padding-right:#{$b}px;}
    .padding#{$b}-b{padding-bottom:#{$b}px;}
    .padding#{$b}-l{padding-left:#{$b}px;}
    .padding#{$b}{padding:#{$b}px;}
}
.notice {
  @include rounded-corners;
}

@mixin qq($a:1,$b){
//支持默认值或外部变量

}

继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

插值语句

#{$name}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
.item-1{width:2em}.item-2{width:4em}.item-3{width:6em}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background:#008000;
  }
}
.puma-icon{background:green}.sea-slug-icon{background:green}.egret-icon{background:green}.salamander-icon{background:green}