sass

sass

变量

$w: 100%;
div{
    width: $w;
}

编译为

div{
    width: 100%;
}

继承

.w20{
    width: 20px;
}
div{
    @extend .w20;
}

编译为

div{
    width: 20px;
}

参数变量

例子1

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

编译为：

.shadowed {
    -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

例子2

@mixin br($num) {
    -webkit-border-radius: $num;
    -moz-border-radius: $num;
    -ms-border-radius: $num;
    -o-border-radius: $num;
    border-radius: $num;
}
p{
    @include br(3px);
}

编译为

p{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

rgba()、rgba()兼容

rgba() 兼容ie
参考文档：一个小方法解决RGBA不兼容IE8

例子：

@mixin bg($bgColor, $color) {
    background-color: $bgColor;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=##{($color)}, endColorstr=##{($color)});
}
div{
    @include bg(rgba(0, 0, 0, .4), 66333333);
}

编译后

div{
    background-color: rgba(0, 0, 0, 0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66333333, endColorstr=#66333333);
}