本篇內(nèi)容主要講解“Scss基礎(chǔ)語(yǔ)法和導(dǎo)入SASS文件的方法是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Scss基礎(chǔ)語(yǔ)法和導(dǎo)入SASS文件的方法是什么”吧!

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為宏偉等服務(wù)建站，宏偉等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為宏偉企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

Sass語(yǔ)法介紹

sass有兩種語(yǔ)法格式Sass(早期的縮進(jìn)格式：Indented Sass)和SCSS(Sassy CSS)

目前最常用的是SCSS，任何css文件將后綴改為scss，都可以直接使用Sassy CSS語(yǔ)法編寫。

所有有效的 CSS 也同樣都是有效的 SCSS。

使用變量

sass使用$符號(hào)來(lái)標(biāo)識(shí)變量。

變量的作用就是，讓你在整個(gè)樣式表中保存并重用一些信息或數(shù)據(jù)。

比如存儲(chǔ)顏色(color)、字體集，或任何你想重用的CSS值。

1. 變量聲明

和css屬性的聲明（property declaration）很像！

如，聲明值為 #F90 的變量 $highlight-color，字體集變量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
 
body {
    font: 100% $font-stack;
    color: $highlight-color;
}

輸出結(jié)果為：

body {
    font: 100% Helvetica, sans-serif;
    color: #F90;
}

變量有作用域，當(dāng)變量定義在css規(guī)則塊內(nèi)，則該變量只能在此規(guī)則塊內(nèi)使用。

2. 變量引用

凡是css屬性的標(biāo)準(zhǔn)值（比如說(shuō)1px或者bold）可存在的地方，就可以使用變量。

css生成時(shí)，變量會(huì)被它們的值所替代。

$color:#A34554;

.box {
  width: 300px;
  height: 400px;
  &-left{
    width: 30%;
    color: $color;
  }
}

生成css為：

.box {
    width: 300px;
    height: 400px;
}
.box-left{
    width: 30%;
    color: #A34554;
}

聲明變量時(shí)，變量的值也可以引用其他變量，如下 $highlight-border 變量中使用了 $highlight-color 變量：

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

//編譯后

.selected {
  border: 1px solid #F90;
}

3. 變量名中的中橫線(hyphen)和下劃線(underscore)

sass的變量名可以使用中劃線和下劃線，用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。

也就是，變量名中的中橫線和下劃線沒(méi)有區(qū)別，兩者互通。

比如下面的示例，中橫線的$link-color，可以通過(guò)下劃線的$link_color引用。

$link-color: blue;
a {
  color: $link_color;
}

//編譯后

a {
  color: blue;
}

相對(duì)，使用中橫線更普遍些！

嵌套（Nesting）

css中重復(fù)寫選擇器是非常惱人的。尤其是嵌套的html元素樣式，如：

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

Scss的嵌套

Sass中，借助在規(guī)則塊中嵌套子規(guī)則塊，可以使重復(fù)選擇器只寫一遍，避免重復(fù)而且可讀性更高。

比如上面的示例，借助scss嵌套：

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

scss嵌套打開(kāi)(解析)的規(guī)則是：從外層到內(nèi)層，將嵌套規(guī)則塊打開(kāi)，父級(jí)的選擇器放在子級(jí)選擇的前面組成一個(gè)新的選擇器，然后再循環(huán)打開(kāi)內(nèi)部的嵌套塊處理。

父選擇器的標(biāo)識(shí)符&

通常，sass解析嵌套時(shí)，把父選擇器（#content）通過(guò)一個(gè)空格連接到子選擇器的前邊（article和aside）形成（#content article和#content aside），即生成后代選擇器。

但是對(duì)于偽類:hover、對(duì)于多class名等情況，則不應(yīng)該以"后代選擇器"的方式連接，比如：

article a {
  color: blue;
  :hover { color: red }
}

默認(rèn)生成的article a :hover會(huì)讓article元素內(nèi)a鏈接的所有子元素在被hover時(shí)都會(huì)變成紅色，顯然是不正確的（應(yīng)該應(yīng)用到a自身）。

為此sass提供了一種特殊的選擇器：父選擇器&。它可以更好的控制嵌套規(guī)則！

只要是選擇器可以放置的地方，就都可以在嵌套中同樣使用&。

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

展開(kāi)時(shí)，&被父選擇器直接替換：

article a { color: blue }
article a:hover { color: red }

通過(guò)&可以在嵌套塊內(nèi)，實(shí)現(xiàn)在父選擇器之前添加選擇器（非常靈活）。

如：

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

群組選擇器嵌套

css中，使用,分割的群組選擇器可以同時(shí)應(yīng)用樣式在多個(gè)選擇器上，如：

h2, h3 {
  margin: 0;
}

但是，如果想對(duì)一個(gè)特定的容器元素內(nèi)的多個(gè)元素，使用群組選擇器時(shí)，就會(huì)有很多重復(fù)性工作。

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

而，sass的嵌套特性，在解開(kāi)一個(gè)內(nèi)嵌的群組選擇器時(shí)，會(huì)把每一個(gè)內(nèi)嵌選擇器正確的結(jié)合起來(lái)：

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

sass會(huì)組合成 .container h2、 .container h3、.container h4 三者的群組選擇器：.container h2, .container h3, .container h4{ xxx }。

同樣，群組選擇器內(nèi)的嵌套也會(huì)以這種方式解析：

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

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

這三種選擇器必須和其他選擇器配合使用。

/* 子組合選擇器> */
article > section { border: 1px solid #ccc }

/* 相鄰組合選擇器+  選擇 元素后緊跟的指定元素 */
header + p { font-size: 1.1em }

/* 同層全體組合選擇器~，選擇所有跟在article后的同層article元素 */
article ~ article { border-top: 1px dashed #ccc }

在sass中使用時(shí)，可以通過(guò)嵌套直接生成正確的結(jié)果（位于外層選擇器的后面，或內(nèi)層選擇器的前面均可?。恍枰褂?code>&。

article {
  /* 放在 里層選擇器前邊 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外層選擇器后邊 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

解開(kāi)后的css為：

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 }

最后一句，nav + & 使用父選擇器&后，原本默認(rèn)的嵌套規(guī)則不再適用，而是直接應(yīng)用 & 組合的結(jié)果。

屬性嵌套

sass中，屬性也可以進(jìn)行嵌套！

把屬性名從中劃線-的地方斷開(kāi)，在該屬性后邊添加一個(gè)冒號(hào):，緊跟一個(gè){ }塊，把子屬性部分寫在這個(gè){ }塊中。這樣就可以實(shí)現(xiàn)屬性的嵌套。

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

編譯生成如下：

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

結(jié)合屬性的縮寫形式，可以實(shí)現(xiàn)在嵌套屬性中指明需要額外樣式的特殊子屬性。

nav {
  border: 1px solid #ccc {
    /* 單獨(dú)設(shè)置的 子屬性 */
     left: 0px;
     right: 0px;
  }
}

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

插值（Interpolation）

類似 es6 中的插值表達(dá)式，Sass也提供了插值計(jì)算的方式。

插值幾乎可以用在任何地方，作為一個(gè) SassScript 表達(dá)式的嵌入結(jié)果。

Sass的插值寫法為：#{$variable_name}。

利用插值動(dòng)態(tài)生成選擇器、屬性名和值

可以使用插值獲取變量或函數(shù)調(diào)用到一個(gè)選擇器、或?qū)傩灾怠?/strong>

比如：

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 編譯為：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

屬性名使用插值變量

使用插值的一個(gè)好處是，可以直接將變量值作為屬性名使用。

如下，通過(guò)插值，屬性名直接用變量來(lái)替代，這樣就可以動(dòng)態(tài)生成屬性。

不使用插值，直接在屬性的位置使用變量$property，將會(huì)被處理為對(duì)變量的賦值！

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 編譯為：
.nav {
   filter: grayscale(50%);
}

在 @mixin 中使用插值

@mixin 混合器將在下一節(jié)介紹。

插值在寫mixin時(shí)非常有用，比如下面通過(guò)傳遞的參數(shù)創(chuàng)建選擇器（來(lái)自官網(wǎng)）：

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

編譯后的CSS為：

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

css的特殊函數(shù)（Special Functions【僅作了解】）

CSS中的許多函數(shù)都可以在Sass中正常使用，但也有一些特殊的函數(shù)有所不同。

所有的特殊函數(shù)，調(diào)用都返回不帶引號(hào)的字符串。

url()

url() 函數(shù)在CSS中很常見(jiàn)，但是它的參數(shù)可以是帶引號(hào)或不帶引號(hào)的URL。

不帶引號(hào)的URL在 Sass 中是無(wú)效的，所以需要特殊邏輯進(jìn)行解析。

如下是url()的示例，如果url()的參數(shù)是有效的不帶引號(hào)URL，Sass會(huì)原樣解析它，并且不帶引號(hào)時(shí)也可以使用插值表達(dá)式；如果不是有效的不帶符號(hào)URL，將會(huì)解析其中的變量或函數(shù)，并轉(zhuǎn)換為普通的CSS函數(shù)調(diào)用。

$roboto-font-path: "../fonts/roboto";

@font-face {
    // 引號(hào)中作為一個(gè)正常的函數(shù)調(diào)用解析
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // 使用數(shù)學(xué)表達(dá)式，解析為普通的函數(shù)調(diào)用
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // 作為一個(gè)插值表達(dá)式特殊處理
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

calc(), clamp(), element()

算數(shù)表達(dá)式 calc() 和 Sass 的沖突；element() 的參數(shù)可以color。

使用它們時(shí)，Sass除了處理插值，其他都會(huì)保持原樣解析！

min() 和 max()

Sass早于CSS支持使用 min() 和 max()，為了兼容所以需要特殊處理。

如果 min() 和 max() 函數(shù)調(diào)用的是普通CSS，則會(huì)被編譯為CSS的  min() 和 max()。

普通CSS（Plain CSS）包含嵌套調(diào)用 calc(), env(), var(), min(), max() 以及 插值。

但是，只要包含 SassScript 的特性，比如 Sass的變量、函數(shù)調(diào)用，min() 和 max() 就會(huì)被作為 Sass 的函數(shù)處理。

$padding: 12px;

.post {
  // max()沒(méi)有使用插值以外的Sass特性, 所以將會(huì)被編譯為 CSS 的 max().
  padding-left: max(#{$padding}, env(safe-area-inset-left));
  padding-right: max(#{$padding}, env(safe-area-inset-right));
}

.sidebar {
  // 應(yīng)為沒(méi)有通過(guò)插值使用sass變量，此處會(huì)調(diào)用Sass內(nèi)置的 max()
  padding-left: max($padding, 20px);
  padding-right: max($padding, 20px);
}

注釋

sass另外提供了一種不同于css標(biāo)準(zhǔn)注釋格式/* ... */的注釋語(yǔ)法，即靜默注釋，以//開(kāi)頭，直到行末結(jié)束。

在生成的css中，靜默注釋將會(huì)被抹除，這樣，可以按需抹除一些注釋，而不需要全部顯示給其他人。

body {
  color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中
  padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
}

當(dāng)標(biāo)準(zhǔn)注釋 /* ... */ 出現(xiàn)在原生css不允許的地方時(shí)，也會(huì)在編譯后的css中被抹去。

多行注釋 /* ... */ 在 compressed 模式下會(huì)被移除，但是如果以 /*! 開(kāi)頭，則仍會(huì)包含在生成的 CSS 中。

導(dǎo)入SASS文件

使用@import可以導(dǎo)入另外的sass文件（在生成css文件時(shí)會(huì)把相關(guān)文件導(dǎo)入進(jìn)來(lái)）。在被導(dǎo)入文件中定義的變量和混合器maxin等均可在導(dǎo)入文件中使用。

css中的@import導(dǎo)入其他css文件很不常用，因?yàn)樗窃趫?zhí)行到@import規(guī)則時(shí)才會(huì)加載其他的css文件，這會(huì)導(dǎo)致頁(yè)面加載變慢、樣式的錯(cuò)亂和延遲等問(wèn)題。

注：Sass官方目前已經(jīng)開(kāi)始打算用 @use 替代 @import 規(guī)則，因此鼓勵(lì)使用 @use。但是，目前只有 Dart Sass 支持 @use，因此，現(xiàn)階段主要還是使用 @import。

scss導(dǎo)入sidebar.scss文件，可以使用如下規(guī)則：

@import "sidebar";

@import "sidebar.scss";

sass局部文件（或分部文件，partial file）

有的sass文件是專門用于被@import命令導(dǎo)入的，而不需要單獨(dú)生成css文件，這樣的文件稱為局部文件。

sass的約定是：sass局部文件的文件名以下劃線 _ 開(kāi)頭，sass在編譯時(shí)就不會(huì)將這個(gè)文件編譯輸出為css。

在 @import 局部文件時(shí)，可以省略文件開(kāi)頭的下劃線和.scss后綴，不需要寫文件的全名。

局部文件可以被多個(gè)不同的文件引入。對(duì)于需要在多個(gè)頁(yè)面甚至多個(gè)項(xiàng)目中使用的樣式，非常有用。

默認(rèn)變量值

通常情況下，在反復(fù)多次聲明一個(gè)變量時(shí)，只有最后一個(gè)聲明有效（即使用最后一個(gè)聲明賦予的值）。

sass通過(guò)!default標(biāo)簽可以實(shí)現(xiàn)定義一個(gè)默認(rèn)值（類似css的!important標(biāo)簽對(duì)立），!default表示如果變量被聲明賦值了則用新聲明的值，否則用默認(rèn)值。

比如一個(gè)局部文件中：

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

如果用戶在導(dǎo)入該sass局部文件之前，聲明了一個(gè) $fancybox-width 變量，那么局部文件中對(duì) $fancybox-width 賦值400px的操作就無(wú)效。如果用戶沒(méi)有做這樣的聲明，則 $fancybox-width 將默認(rèn)為400px。

也就是，在后面使用 !default 聲明的變量，并不會(huì)覆蓋其前面聲明賦值的相同變量值。

嵌套導(dǎo)入

sass可以在嵌套規(guī)則塊的內(nèi)部使用@import導(dǎo)入局部文件【局部文件會(huì)被直接插入到css規(guī)則內(nèi)導(dǎo)入它的地方】。

如局部文件_blue-theme.sass內(nèi)容為：

aside {
  background: blue;
  color: white;
}

將它導(dǎo)入到一個(gè)CSS規(guī)則內(nèi)：

.blue-theme {@import "blue-theme"}

生成的結(jié)果跟你直接在 .blue-theme 選擇器內(nèi)寫 _blue-theme.scss 文件中的內(nèi)容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的CSS導(dǎo)入的支持

sass中支持原生css的導(dǎo)入，會(huì)生成原生的scc @import(在瀏覽器解析css時(shí)再下載并解析)。

sass中@import生成原生css導(dǎo)入的條件是：

• 被導(dǎo)入文件的名字以.css結(jié)尾；

• 被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css%EF%BC%89）

• 被導(dǎo)入文件的名字是CSS的url()值。

如果想將原始的css文件，當(dāng)做sass導(dǎo)入，可以直接修改.css后綴為.scss（sass語(yǔ)法完全兼容css）。

到此，相信大家對(duì)“Scss基礎(chǔ)語(yǔ)法和導(dǎo)入SASS文件的方法是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！