sass的使用

一、变量

//声明一个变量
$highlight-color: #F90;
.selected {border: 1px solid $highlight-color;
}//编译后
.selected {border: 1px solid #F90;
}

二、导入

@import "xxx.scss"

三、混合器简单定义

通过@mixin定义，通过@include调用

// mixin.scss
//使用@mixin定义变量
@mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}// 当前文件
//通过@include使用定义的变量
notice {background-color: green;border: 2px solid #00aa00;@include rounded-corners;
}

四、混合器传参

通过@mixin定义，通过@include调用

//定义
@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
//调用
a {@include link-colors(blue, red, green);
}

五、样式继承

通过选择器继承 @extend 继承样式

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