sass入门总结

变量 $

$width: 5em;
#main {
  width: $width;
}

嵌套引用

嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：

$left: left;
.div {
    border-#{$left}-width: 5px;
}

继承 @extend

将一个选择器下的所有样式继承给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

=>

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

@mixin

• 使用@mixin命令，定义一个代码块
• 使用@include命令，调用这个mixin

@mixin left {
　　float: left;
　　margin-left: 10px;
}
div {
　　@include left;
}

参数和缺省值

@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
}
div {
　 @include left(20px);
}

高级用法

流程控制

条件语句@if @else

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

循环语句

• @for

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

• @while $i

$i: 6;
@while $i > 0 {
　  .item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

函数

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}