sass学习笔记

#{} 在字符串中使用变量

p:before {
    content: '#{5 + 10}'
}

p:before {
    content: '15';
}

ie_hex_str 将颜色值转换成IE filter中使用的带透明度的 #AARRGGBB格式(前两位是16进制的alpha值)

filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($color1)}', endColorstr='#{ie-hex-str($color2)}');

@at-root 跳出选择器嵌套

.a {
    color: green;
    @at-root {
        .b { 
            color: red;
        }    
    }
}

.a {color: green;}
.b {color: red;}

@for

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

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

不确定数量的参数

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

样式输出格式
:nested
:expanded
:compact
:compressed

Comments
Write a Comment