嵌套

1.父級嵌套

div{
  display: inline-block;
  a{
    color: black;  
    &:hover{
      color: white;
      font-size: 20px;
    }
  }
}

2.屬性嵌套

div{
  font{
    weight: bold;
    size: 16px;
    family: "微軟雅黑";
  }
}

div{
  border: 1px solid #000;{
    left: 0;
    right: 0;
  }
}

混合mixin

類似于js中的函數(shù)

@mixin 名字(參數(shù)1， 參數(shù)2) {
  ...
}

@mixin alert {
    color: #eee;
    background-color: #fcf8e3;
    a{
      color: blue;
    }
}
alert-waring {
  @include alert;
}

在mixin中使用參數(shù)

darken:給指定顏色加深指定數(shù)值的顏色值

@mixin alert($text-color, $background) {
    color: $text-color;
    background-color: $background;
    a{
      color: darken($text-color, 10%);
    }
}
alert-waring {
  @include alert(#8a6d3b, #fcf8e3);
}
// 指定變量名稱后就不用考慮順序了
alert-info {
  @include alert($background: #fcf8e3, $text-color: #8a6d3b);
}

繼承 extend

用于繼承另一個選擇器中設定的屬性蔫耽，同時繼承其子屬性值

.alert{
  padding: 12px;
}
.alert a{
  font-size: 20px;
}
.alert-info {
  @extend .alert;
  background-color: blue;
}

Partials

scss中本身包含了一個導入其他scss文件的功能叫做import
但是每次import的時候都會發(fā)出一個http請求娃肿，消耗服務器資源瑟啃，導致頁面變慢
scss擴這里import的功能：可以把整個的scss文件分隔成小的css塊（scss文件）遍烦，通過import導入進來，但不會編譯這些css塊撑碴，這些小的css塊叫做Partials
Partials使用_下劃線開頭標識

_base.scss

background: {
  color: blue;
  font-size: 16px;
}

style.scss

在import時候谊惭，不用帶下劃線，會自動查找

@import 'base'
.alert{
  padding: 12px;
}
.alert a{
  font-size: 20px;
}

注釋

1凌停、單行注釋

不會出現(xiàn)在編譯之后的文件

// 這是單行注釋

2粱年、多行注釋

多行注釋會在編譯輸出的文件中保留，但在壓縮的文件中不會保留

/*
 * 這是多行注釋
 * 這是多行注釋
 */

3罚拟、強制注釋

比多行注釋多一個台诗！號，會一直出現(xiàn)在編譯文件中和壓縮后的文件

/*!
 * 這是多行注釋
 * 這是多行注釋
 */

指令

@if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@while

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

自定義函數(shù)

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

編譯為

#sidebar {
  width: 240px; 
}

警告

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}