&父类选择器
@at-root 不参与嵌套,限定为根目录 @at-root(without:support | media | all)
@mixin @include 混合器
运算符:<,>,>=,<=,==,!=
#{$var} 插入变量值
%var 占位符选择器 未被extend则不会被书入 !optional不生成新的选择器

  1. @if @else-if @if
  2. @for from v1 to v2{ }
  3. @for from v1 through v2{} (包含条件)
  4. @each v1 in
    1. @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); } }
    2. 对象@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } }
    3. 列表@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); border: 2px solid $color; cursor: $cursor; } }
  5. @while
  6. @mixin
    1. 默认值@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } }
    2. 不限数量@mixin box-shadow($shadows…) { ……. }
    3. @mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } }
    4. $color: white; @mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors { color: $color; } }
  7. 函数@function

less和sass的不同

  1. 变量作用域不同 $
  2. 编译环境不同 ruby
  3. 变量符不同 @ $
  4. less不支持条件语句 if else