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;
}