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