scss指令筆記

指令

• @import
• 分音，若是須要導入 SCSS 或者 Sass 文件，但又不但願將其編譯爲 CSS，只須要在scss文件名前面加下劃線就能夠了，
• @media媒體查詢
  • 查詢條件也是容許嵌套的

  @media screen {
    .sidebar {
      @media (orientation: landscape) {
        width: 500px;
      }
    }
  }
  // 編譯結果：
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
  }

• @extend繼承
• 樣式繼承

// 例子1 
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// 編譯結果：
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 border: 1px #f00;
 background-color: #fdd;
 border-width: 3px;
}
// 例子2
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.error.intrusion {
 background-image: url("/image/hacked.png");
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// 則<div class="seriousError intrusion"><div>也會有hacked.png的背景
// 編譯結果爲：
.error, .seriousError {
 border: 1px #f00;
 background-color: #fdd; }

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

.seriousError {
 border-width: 3px; }

• 延伸選擇器
• 例如：.special.cool，a:hover 或者 a.user[href^="http://"]
• 多重延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

• 繼續延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
.test{
  width: 10px;
   @extend .seriousError;
}

• 在媒體查詢中延伸
• Sass 不能夠將 @media 層外的 CSS 規則延伸給指令層內的 CSS，這樣會生成大量的無用代碼。也就是說，若是在 @media （或者其餘 CSS 指令）中使用 @extend，必須延伸給相同指令層中的選擇器。

// 可行
@media print {
 .error {
   border: 1px #f00;
   background-color: #fdd;
 }
 .seriousError {
   @extend .error;
   border-width: 3px;
 }
}
// 不能夠：
.error {
 border: 1px #f00;
 background-color: #fdd;
}

@media print {
 .seriousError {
   // INVALID EXTEND: .error is used outside of the "@media print" directive
   @extend .error;
   border-width: 3px;
 }
}