Sass的使用

1、在Vue項目中使用Sass

用 vue-cli 生成的 Vue 項目，在項目中使用 Sass 需要安裝兩個依賴包：

//安裝下面的包時可能會報錯，此時可以使用 cnpm 淘寶鏡像進行安裝
cnpm install node-sass --save-dev   
cnpm install sass-loader --save-dev

//node-sass和sass-loader的版本過高可能會有各種奇奇怪怪的問題。親測，以下版本可配合 node8.11.1使用
//最好先裝node-sass，否則可能會有問題
cnpm install node-sass@4.14.1 --save-dev
cnpm install sass-loader@7.3.1 --save-dev

然后修改 webpack.base.config.js 文件，修改 module 下的 rules ：

module: {
   rules: [
       ...
      {
          test: /\.scss$/,
          loaders: ["style", "css", "sass"]
       }
       ...
   ]

}

在 vscode 中使用 sass 語法可能會提示語法錯誤，但是編譯運行都沒問題，此時修改 vscode 的設置：先安裝vetur插件，在vscode的設置中添加： "files.associations": { "*.vue": "vue" }

1.2、sass 的特性介紹

sass的語法完全兼容css，所以我們可以把css文件直接改名為.scss后綴，并且可以用來直接導入。

2、Sass 的基本語法

2.1、變量

在sass中你可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。

2.1.1、變量聲明及使用

sass使用 $ 符號來標識變量。任何可以用作css屬性值的賦值都可以用作sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值。

變量可以在css規則塊定義之外聲明，也可以在規則塊之內聲明。當變量定義在css規則塊內，那么該變量只能在此規則塊內使用。

$nav-color: #F90;
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

nav {
  $width: 100px;  //此時的width 變量只能在這個規則塊內使用
  width: $width;
  color: $nav-color;
}

在聲明變量時，變量值也可以引用其他變量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

sass 的變量名可以使用中劃線 - 或者下劃線 _ 命名，sass并不強迫一定要使用中劃線或下劃線，所以這兩種用法都相互兼容。甚至用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。

2.2、嵌套規則

在sass中可以不用重復寫選擇器，sass允許在規則塊中嵌套規則塊

#content {
  background-color: #f5f5f5;
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 編譯后 */
#content {background-color: #f5f5f5;}
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

2.2.1、父選擇器標識符（&）

用 & 符號放在嵌套規則中可以表示嵌套規則的父選擇器

article h1 {
  color: blue;
  &:hover { color: red }
}

/*編譯后*/
article a { color: blue }
article h1:hover { color: red }   /* 表示 h1 hover變紅色 */

/*  如果不使用&符號則可能表示的會是另一種意思  */
/*  下面的sass代碼表示article元素內 h1 的所有子元素被hover時都會變成紅色，而不是h1元素 */
article h1 {
  color: blue;
  :hover { color: red }
}

在嵌套規則中，& 符號表示的就是父選擇器，在 & 選擇器之前也可以添加選擇器。

#content aside {
  color: red;
  body.ie & { color: green }
}

/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }

2.2.2、群組選擇器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

/* 編譯后 */
.container h1, .container h2, .container h3 { 
  margin-bottom: .8em
}

你需要特別注意群組選擇器的規則嵌套生成的css，雖然sass讓你的樣式表看上去很小，但實際生成的css卻可能非常大，這會降低網站的速度。

2.2.3、子組合選擇器和同層組合選擇器：>、+ 和 ~

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

/* 編譯后 */
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

2.2.4、屬性嵌套

屬性嵌套指的是在CSS規則中把屬性名從中劃線 - 的地方斷開，在根屬性后邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。

nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

/* 編譯后 */
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

對于屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規則：

nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}

/* 編譯后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3、如何導入SASS文件

css有一個特性，即@import規則（非常不常用），它允許在一個css文件中導入其他css文件。然而，在只有執行到@import時，瀏覽器才會去下載其他css文件，這會導致頁面加載起來變慢，因為這樣你會需要加載幾個css文件。

sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。并且被導入文件中定義的所有變量和混合器均可在導入文件中使用。

使用sass的@import規則并不需要指明被導入文件的全名。你可以省略.sass或.scss文件后綴，比如：

/* index.scss文件 */
h1 {
   color: red;
}

/* 導入語句不要漏了后面的分號';' ，否則有可能會報錯 */
@import './index';     /* 導入index.scss文件 */
.hello h1{
  &:hover {
    color: red;
  }
}

3.1、導入sass局部文件

用下劃線開頭 _ 命名的 scss 文件，代碼在編譯時并不會將這些文件編譯為單獨的 css 文件，我們把這樣的 scss 文件稱之為局部文件。其他的 scss 文件在編譯時應該每個都會被編譯成單獨的 css 文件（未驗證過）。

我們可以在局部文件中寫入一些用來給其他文件導入的樣式及變量等，而且它們并不會被編譯成單獨的 css 文件。在@import一個 scss 局部文件時，可以省略文件名開頭的下劃線。比如想導入 '_common.scss' 文件，可以這樣寫： @import './common';

3.2、默認變量值

可以用 !default 來聲明一個默認變量，如果沒有重復聲明的話，用戶使用該變量就會使用默認值。但是如果被重復聲明賦值，該默認變量值就會被覆蓋掉。

$link-color: blue !default;;
$link-color: red;
a {
  color: $link-color;   /*color會被賦值為red*/
}

3.3、嵌套導入

sass允許 @import命令寫在css規則內，在這種導入方式下，被導入的局部文件中定義的所有變量和混合器，只會在這個規則范圍內生效，而不會全局生效。

/* blue.scss文件 */
aside {
  background: blue;
  color: white;
}

/* 導入 */
.blue {
  @import "blue.scss"
}
/* 編譯后 */
.blue {
  aside {
    background: blue;
    color: #fff;
  }
}

3.4、原生的CSS導入

通常在sass中使用@import時，sass會嘗試找到對應的sass文件并導入進來。但是在 sass 中也可以導入 css 文件，在下列三種情況下，sass 會將 @import 命令認為是導入 css 文件，這會造成瀏覽器額外的下載。

被導入文件的名字以.css結尾；
被導入文件的名字是一個URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；
被導入文件的名字是CSS的url()值。

4、靜默注釋

css中的注釋是對用戶可見的，在sass中另外提供了一種語法即靜默注釋，該語法不同于css標準注釋格式/* ... */，并且其注釋的內容不會出現在生成的css文件中。以 // 開頭的注釋語法即為靜默注釋，跟javascript注釋語法一樣。

body {
  color: #333; // 這種注釋內容不會出現在生成的css文件中
  padding: 0; /* 這種注釋內容會出現在生成的css文件中 */
}

5、混合器（@mixin、@include）

使用sass的混合器可以實現大段樣式的重用，混合器使用@mixin標識符定義，這個標識符可以給一段樣式命名，然后我們就可以通過@include引用這個名字來重用這段樣式。

//定義
@mixin aaa {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//引用
notice {
  background-color: green;
  @include aaa;
}

//sass最終生成：
.notice {
  background-color: green;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器中不僅可以包含屬性，同時也可以包含css規則，包含選擇器和選擇器中的屬性等

@mixin no-bullets {
  list-style: none;    //混合器中使用屬性
  li {                      //混合器中使用元素選擇器
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}   

//導入
ul.plain {
  color: #444;
  @include no-bullets;
}
//相當于
ul.plain {
  color: #444;
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

5.1、給混合器傳參

混合器并不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定制混合器生成的精確樣式。當@include混合器時，參數就是css屬性值，混合器的這種特性跟 javascript 中的 function 類似。

//聲明
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//使用
a {
  @include link-colors(blue, red, green);
}
//Sass最終生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

sass 還允許通過語法 $name: value 的形式指定每個參數的值，這種形式的傳參，就可以不必在乎參數的順序了，只需要保證沒有漏掉參數即可

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

5.2、混合器默認參數

在混合器中，我們可以給參數指定默認的屬性值。參數默認值使用 $name: value 的聲明形式，默認值可以是任何有效的 css 屬性值，或者是其他參數的引用。

@mixin link-colors(
    $normal,
    $hover: red,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

6、選擇器繼承（@extend）

使用選擇器繼承 @extend 可以在一個選擇器中繼承另一個選擇器定義的所有樣式。

.error {
  border: 1px solid red;
  background-color: #fdd;
}
//通過選擇器繼承繼承樣式
.seriousError {
  @extend .error;
  border-width: 3px;
}

上面的代碼會使得以class="seriousError"修飾的 html 元素最終的展示效果是class="seriousError error"

注意：上面中的.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承

.error a{  //將也會影響.seriousError a
  color: red;
}
h1.error { //將也會影響hl.seriousError
  font-size: 1.2rem;
}

//使用繼承后class="seriousError"的所有元素內的 h1 標簽和超鏈接也會變成紅色和粗體。
.seriousError {
  @extend .error;
}

6.1、繼承元素標簽的樣式

實際上，@extend 不僅可以繼承類的樣式，同樣也可以繼承元素標簽的的樣式

a {
  color: green;
}
//繼承 a 標簽的樣式
.panel {
  @extend a;
}

6.2、sass繼承的原理

sass 中繼承實際上是在每個被繼承的類處添加需要繼承的類名，以使得樣式對兩個類名都起作用。

.seriousError{
   @extend .error;
}

//使用繼承后，樣式表中的任何一處.error都用.error, .seriousError這一選擇器組進行替換。
.error {
  color: red;
}
//將會被替換為
.error, .seriousError {
  color: red;
}

.error a{
  color: red;
}
//將會被替換為
.error a, .seriousError a{
  color: red;
}

注意：應避免用復雜選擇器（比如.a .b這種有后代選擇器的）去使用繼承，那樣會使得在一個CSS規則中的選擇器的個數變得非常大，代碼也變得艱澀難懂。

posted @ 2019-08-16 17:21 wenxuehai 閱讀(452) 評論(0) 收藏舉報

刷新頁面返回頂部

提升自己，才有選擇的能力和勇氣