@import

Sass 支持所有 CSS3 的 @ 規則，以及一些 Sass 專屬的規則，也被稱爲“指令（directives）”。這些規則在 Sass 中具有不同的功效，詳細解釋如下。

@import

Sass 擴展了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都會被合併並輸出一個單一的 CSS 文件。另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。

Sass 會在當前目錄下尋找其他 Sass 文件，如果是 Rack、Rails 或 Merb 環境中則是 Sass 文件目錄。也可以通過 :load_paths 選項或者在命令行中使用 --load-path 選項來指定額外的搜索目錄。

@import 根據文件名引入。默認情況下，它會尋找 Sass 文件並直接引入，但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則：

如果文件的擴展名是 .css。
如果文件名以 http:// 開頭。
如果文件名是 url()。
如果 @import 包含了任何媒體查詢（media queries）。

如果上述情況都沒有出現，並且擴展名是 .scss 或 .sass，該名稱的 Sass 或 SCSS 文件就會被引入。如果沒有擴展名， Sass 將試着找出具有 .scss 或 .sass 擴展名的同名文件並將其引入。

例如：

@import "foo.scss";

或

@import "foo";

兩者都將引入 foo.scss 文件，而

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

將被編譯爲：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以通過一個 @import 引入多個文件。例如：

@import "rounded-corners", "text-shadow";

將引入 rounded-corners 和 text-shadow 兩個文件。

如果你有一個 SCSS 或 Sass 文件需要引入，但是你又不希望它被編譯爲一個 CSS 文件，這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。這將告訴 Sass 不要把它編譯成 CSS 文件。然後，你就可以像往常一樣引入這個文件了，而且還可以省略掉文件名前面的下劃線。

例如，你有一個文件叫做 _colors.scss。這樣就不會生成 _colors.css 文件了，而且你還可以這樣做：

@import "colors";//不用加下劃線

來引入 _colors.scss 文件。

注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。例如， _colors.scss 不能與 colors.scss 並存。

嵌套 @import

雖然大部分時間只需在頂層文件使用 @import 就行了，但是，你還可以把他們包含在 CSS 規則和 @media 規則中。

來看官網提供的一個簡單示例：

假設要引入的樣式文件`example.scss`文件中包含這樣的代碼：

.example {
  color: red;
}

然後這樣引用：

#main {
  @import "example";
}

編譯出來的 CSS：

#main .example {
  color: red;
}

@media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯出來：

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 也可以嵌套 @media：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

此時編譯出來：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

在使用 @media 時，還可以使用插件#{}:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

編譯出來的 CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

Sass 中的 @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; }

詳細的可以回顧前面介紹的繼承樣式部分。

擴展選擇器：

@extend 不止擴展類選擇器，還可以擴展任何選擇器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

編譯出來：

a:hover, .hoverlink {
  text-decoration: underline; }

再來看一個複雜點的：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

編譯出來的CSS

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多個擴展

所設某個樣式要繼承多個地方的樣式，那麼可以使用 @extend 來繼承多個選擇器或佔位符的樣式，如：

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

編譯出來的CSS

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

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

擴展單一選擇器

前面我們知道 %placeholder 不使用@extend顯示調用是不會生成任何樣式代碼。那麼在選擇器中使用佔位符一樣。比如下面的代碼：

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

這段代碼在不調用之前不產生任何代碼，只有能過@extend調用之後才生成代碼：

.notice {
  @extend %extreme;
}

編譯出來的CSS

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

@at-root

@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之後，想讓某個選擇器跳出，此時就可以使用 @at-root：

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}

編譯出來的CSS

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

@debug

@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之後，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug:

@debug 10em + 12em;

會輸出：

Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功能類似，用來幫助我們更好的調試 Sass。如：

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

@error

@error 和 @warn、@debug 功能是如出一轍。

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設置在10以內的數";
  }

}

.test {
  @include error(15);
}

編譯的時候：

你需要將15值設置在10以內的數 on line 7 at column 5

Sass學習實踐筆記（五）

@import

@media

@extend

@extend

@at-root

@debug

@warn

@error

WebPack學習實踐筆記（一）

Vue學習實踐筆記（一）

Sass學習實踐筆記（五）

Sass學習實踐筆記（二）

Bootstrap學習實踐筆記（六）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結