文章目錄

• Sass 安裝教程
• • `npm` 安裝
• Sass 變量存儲(chǔ)數(shù)據(jù)
• Sass 嵌套 CSS
• Mixins 創(chuàng)建可重用 CSS
• @if 和 @else 為樣式添加邏輯
• @for 創(chuàng)建一個(gè) Sass 循環(huán)
• @each 遍歷列表中的項(xiàng)目
• @while 循環(huán)創(chuàng)建樣式
• Partials 將樣式分成小塊
• 將一組 CSS 樣式擴(kuò)展到另一個(gè)元素

Sass，英文全稱為 “Syntactically Awesome StyleSheets”，是對(duì) CSS 的擴(kuò)展。它添加了一些基礎(chǔ) CSS 中不具有的新特性。 Sass 簡(jiǎn)化了 CSS，這讓維護(hù)項(xiàng)目中的樣式表變得更容易。

Sass 安裝教程

npm 安裝

我們可以使用 npm（NPM 使用介紹）來(lái)安裝 Sass。

npm install -g sass

注： 國(guó)內(nèi) npm 建議使用淘寶鏡像來(lái)安裝，參考：npm 國(guó)內(nèi)慢的問(wèn)題解決

Sass 變量存儲(chǔ)數(shù)據(jù)

Sass 不同于 CSS 的一個(gè)特點(diǎn)是它允許使用變量。 可以在 Sass 中聲明變量，并為它賦值，就像在 JavaScript 中一樣。

在 JavaScript 和 TypeScript 中，變量是使用 let 和 const 關(guān)鍵字定義的。 在 Sass 中，變量以 $ 開(kāi)頭的，后跟變量名。

這里有幾個(gè)例子：

$main-fonts: Arial, sans-serif; $headings-color: green;

并使用變量：

h1 {font-family: $main-fonts;color: $headings-color; }

當(dāng)需要把多個(gè)元素設(shè)置成相同顏色時(shí)，變量就會(huì)很有用。 一旦需要更改顏色，只需要改變這個(gè)變量的值就好。

Sass 嵌套 CSS

Sass 允許 CSS 規(guī)則的嵌套，這在組織樣式表的時(shí)候會(huì)很有用。

在 CSS 里，每個(gè)元素的樣式都需要寫(xiě)在獨(dú)立的代碼塊中，如下所示：

nav {background-color: red; }nav ul {list-style: none; }nav ul li {display: inline-block; }

對(duì)于一個(gè)大型項(xiàng)目，CSS 規(guī)則會(huì)很復(fù)雜。 這時(shí)，引入嵌套功能（即在對(duì)應(yīng)的父元素中寫(xiě)子元素的樣式）可以有效地簡(jiǎn)化代碼：

nav {background-color: red;ul {list-style: none;li {display: inline-block;}} }

Mixins 創(chuàng)建可重用 CSS

在 Sass 中，mixin 是一組 CSS 聲明，可以在整個(gè)樣式表中重復(fù)使用。

CSS 的新功能需要一段時(shí)間適配后，所有瀏覽器后才能完全使用。 隨著瀏覽器的不斷升級(jí)，使用這些 CSS 規(guī)則時(shí)可能需要添加瀏覽器前綴。 考慮 box-shadow：

div {-webkit-box-shadow: 0px 0px 4px #fff;-moz-box-shadow: 0px 0px 4px #fff;-ms-box-shadow: 0px 0px 4px #fff;box-shadow: 0px 0px 4px #fff; }

對(duì)于所有具有 box-shadow 屬性的元素重寫(xiě)此規(guī)則，或者更改每個(gè)值以測(cè)試不同的效果，需要花費(fèi)大量的精力。 Mixins 就像 CSS 的函數(shù)。 以下是一個(gè)例子：

@mixin box-shadow($x, $y, $blur, $c){ -webkit-box-shadow: $x $y $blur $c;-moz-box-shadow: $x $y $blur $c;-ms-box-shadow: $x $y $blur $c;box-shadow: $x $y $blur $c; }

定義以 @mixin 開(kāi)頭，后跟自定義名稱。 參數(shù)（$x，$y，$blur，以及上例中的 $c ）是可選的。 現(xiàn)在在需要 box-shadow 規(guī)則的地方，只需一行 mixin 調(diào)用而無(wú)需添加所有的瀏覽器前綴。 mixin 可以通過(guò) @include 指令調(diào)用。

div {@include box-shadow(0px, 0px, 4px, #fff); }

@if 和 @else 為樣式添加邏輯

Sass 中的 @if 指令對(duì)于測(cè)試特定情況非常有用 —— 它的工作方式與 JavaScript 和 TypeScript 中的 if 語(yǔ)句類似。

@mixin make-bold($bool) {@if $bool == true {font-weight: bold;} }

類似 JavaScript 和 TypeScript，Sass 也可以使用 @else if 和 @else 測(cè)試更多條件：

@mixin text-effect($val) {@if $val == danger {color: red;}@else if $val == alert {color: yellow;}@else if $val == success {color: green;}@else {color: black;} }

@for 創(chuàng)建一個(gè) Sass 循環(huán)

可以在 Sass 中使用 @for 循環(huán)添加樣式，它的用法和 JavaScript 中的 for 循環(huán)類似。

@for 以兩種方式使用：“開(kāi)始 through 結(jié)束” 或 “開(kāi)始 to 結(jié)束”。 主要區(qū)別在于 “開(kāi)始 to 結(jié)束” 不包括 結(jié)束數(shù)字，而 “開(kāi)始 through 結(jié)束” 包括 結(jié)束號(hào)碼。

這是一個(gè)開(kāi)始 through 結(jié)束的示例：

@for $i from 1 through 12 {.col-#{$i} { width: 100%/12 * $i; } }

#{$i} 部分是將變量（i）與文本組合成字符串的語(yǔ)法。 當(dāng) Sass 文件轉(zhuǎn)換為 CSS 時(shí)，它看起來(lái)像這樣：

.col-1 {width: 8.33333%; }.col-2 {width: 16.66667%; }....col-12 {width: 100%; }

@each 遍歷列表中的項(xiàng)目

上一個(gè)挑戰(zhàn)顯示了 @for 指令如何通過(guò)起始值和結(jié)束值循環(huán)一定次數(shù)。 Sass 還提供 @each 指令，該指令循環(huán)遍歷列表或映射中的每個(gè)項(xiàng)目。 在每次迭代時(shí)，變量將從列表或映射分配給當(dāng)前值。

@each $color in blue, red, green {.#{$color}-text {color: $color;} }

map 的語(yǔ)法略有不同。 這是一個(gè)示例：

$colors: (color1: blue, color2: red, color3: green);@each $key, $color in $colors {.#{$color}-text {color: $color;} }

請(qǐng)注意，需要用 $key 變量來(lái)引用 map 中的鍵。 否則，編譯后的 CSS 將包含 color1，color2… 以上兩個(gè)代碼示例都轉(zhuǎn)換為以下 CSS：

.blue-text {color: blue; }.red-text {color: red; }.green-text {color: green; }

@while 循環(huán)創(chuàng)建樣式

Sass 中的 @while 指令與 JavaScript 中的 while 類似。 只要滿足條件，它就會(huì)一直創(chuàng)建 CSS 代碼。

使用 @for 創(chuàng)建的簡(jiǎn)單網(wǎng)格系統(tǒng)示例。

@for $i from 1 through 12 {.col-#{$i} { width: 100%/12 * $i; } }

用 @while 也可以實(shí)現(xiàn)。

$x: 1; @while $x < 13 {.col-#{$x} { width: 100%/12 * $x;}$x: $x + 1; }

首先，定義變量 $x 并將其設(shè)置為 1。 接下來(lái)，使用 @while 指令，while $x 小于 13 時(shí)創(chuàng)建網(wǎng)格系統(tǒng) 。 在設(shè)置 width 的 CSS 規(guī)則后，$x 增加 1 以避免無(wú)限循環(huán)。

Partials 將樣式分成小塊

Sass 中的 Partials 是包含 CSS 代碼段的單獨(dú)的文件。 這些片段可以導(dǎo)入其它 Sass 文件使用。 可以把類似代碼放到模塊中，以保持代碼結(jié)構(gòu)規(guī)整且易于管理。

partials 的名稱以下劃線（_）字符開(kāi)頭，這樣 Sass 就知道它是 CSS 的一小部分，而不會(huì)將其轉(zhuǎn)換為 CSS 文件。 此外，Sass 文件以 .scss 文件擴(kuò)展名結(jié)尾。 要將 partial 中的代碼放入另一個(gè) Sass 文件中，使用 @import 指令。

例如，如果所有 mixins 都保存在名為 _mixins.scss 的 partial 中，并且在 main.scss 文件中需要它們，下面是使用方法：

@import 'mixins'

請(qǐng)注意，import 語(yǔ)句中不需要下劃線 —— Sass 知道它是 partial。 將 partial 導(dǎo)入文件后，可以使用所有變量、mixins 和其它代碼。

將一組 CSS 樣式擴(kuò)展到另一個(gè)元素

Sass 有一個(gè)名為 extend 的功能，可以很容易地從一個(gè)元素中借用 CSS 規(guī)則并在另一個(gè)元素上重用它們。

例如，下面的 CSS 規(guī)則塊設(shè)置了 .panel class 的樣式。 它有 background-color，height 和 border。

.panel{background-color: red;height: 70px;border: 2px solid green; }

現(xiàn)在需要另一個(gè)名為 .big-panel 的面板。 它具有與 .panel 相同的基本屬性，但還需要 width 和 font-size。 可以從 .panel 復(fù)制并粘貼初始 CSS 規(guī)則，但是當(dāng)添加更多類型的面板時(shí)，代碼會(huì)變得重復(fù)。 extend 指令是一種重用為一個(gè)元素編寫(xiě)的規(guī)則的簡(jiǎn)單方法，可以為另一個(gè)元素重用并添加更多規(guī)則：

.big-panel{@extend .panel;width: 150px;font-size: 2em; }

除了新樣式之外，.big-panel 將具有與 .panel 相同的屬性。

總結(jié)

以上是生活随笔為你收集整理的【Sass】全面的 Sass 教程及学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。