中文文檔地址：https://www.sasscss.com/docs/#css-extensions

1. 嵌套樣式

允許將一個(gè) CSS 樣式嵌套進(jìn)另一個(gè)樣式中。

body {
  min-height: 100vh;
  .box {
    height: 100px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      height: 50px;
      width: 50px;
      background: #999;
    }
  }
}

2. 引用父級選擇器： ‘&’

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

& 必須出現(xiàn)在的選擇器的開頭位置, 可以跟隨后綴。

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

2. 嵌套屬性

.box {
    font: {
      family: fantasy;
      size: 30em;
      weight: bold;
    }
}
// 編譯為
.box {
  font-family: fantasy; 
  font-size: 30em;  
  font-weight: bold; 
}

3. 變量 ‘$’

$width: 100px;
.box {
  width: $width;
}

作用域： 不在任何嵌套選擇器內(nèi)定義的變量則在可任何地方使用，嵌套在選擇器內(nèi)的只有嵌套層級范圍內(nèi)可用。可以在后面添加 !global 標(biāo)志，就可以全局引用（不推薦使用）

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

#sidebar {
  width: $width;
}

4. 運(yùn)算

支持對數(shù)字標(biāo)準(zhǔn)的算術(shù)運(yùn)算（加法 +，減法 - ，乘法 * ，除法 / 和取模 % ），數(shù)字支持關(guān)系運(yùn)算符(<, >, <=, >=)，并且所有類型支持相等運(yùn)算符(==, !=)

1. 除法 /

p {
  font: 10px/8px;             // 原生的CSS，不作為除法
  $width: 1000px;
      width: $width/2;            // 使用了變量, 作為除法
  width: round(1.5)/2;        // 使用了函數(shù), 作為除法
  height: (500px/2);          // 使用了括號, 作為除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作為除法
  font: (italic bold 10px/8px); // 在一個(gè)列表（list）中，括號可以被忽略。
}

如果你想純CSS 的/和變量一起使用（愚人碼頭注：即/不作為除法使用），你可以使用#{}插入他們。例如：

p {
  $font-size: 12px;
      $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

5. mixin

// 定義 @minxin
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
// 引入 @include
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

可以設(shè)置參數(shù)

@mixin large-text($color) {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: $color;
}

.page-title {
  $green: green;
  @include large-text($green);
  padding: 4px;
  margin-top: 10px;
}

// 可以引入默認(rèn)值，要是沒有傳參數(shù)，就使用默認(rèn)值

@mixin large-text($color: red) {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: $color;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
// color 會編譯為 red

6. 函數(shù)

@function px($npx){
  @return $npx/375 * 100vw
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 px(20);
  margin-top: px(20);
  .icon {
    background: #eee;
    height: px(48);
    width: px(48);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
}
// 可以適應(yīng)不同尺寸手機(jī)端

7. 媒體查詢

$break-small: 320px;
$break-large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $break-large) { @content; }
  }
}
.profile-pic {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}

// 編譯后

.profile-pic {
  float: left;
  width: 250px;
}
@media only screen and (max-width: 320px) {
  .profile-pic {
    width: 100%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
  .profile-pic {
    width: 125px;
  }
}
@media only screen and (min-width: 1024px) {
  .profile-pic {
    float: none;
  }
}

8. 一個(gè)按鈕小例子 （hover 之后上下，左右抖動）

*{box-sizing: border-box; padding: 0; margin: 0;}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin createButton($color){
  background: $color;
  box-shadow: 0 4px 0 darken($color,15%)
}
.buttonWrapper{
  button {
    margin: 0 40px;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    &:first-child {
      $blue: #55acee;
      @include createButton($blue);
      &:hover {
        animation-duration: 0.3s;
        animation-name: left-right; 
      }
    }
    &:nth-child(2) {
      $green: #2ecc71;
      @include createButton($green);
        &:hover{
          animation-name: up-down;
          animation-duration: 0.3s;
      }
    }
  }
}
$n: 10%;
$step: 25%;
@keyframes left-right {
  @for $i from 0 to 4 {
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateX($n)
      }@else{
        transform: translateX(-$n)
      }
    }
  }
  100%{
    transform: translateX(0)
  }
}
$n2: 20%;
$step: 25%;
@keyframes up-down {
  @for $i from 0 to 4 {
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateY($n2)
      }@else{
        transform: translateY(-$n2)
      }
    }
  }
  100%{
    transform: translateY(0)
  }
}

預(yù)覽