Angular專(zhuān)案中怎麼使用 SASS 樣式？以下這篇文章跟大家介紹一下Angular 中 SASS 樣式的使用方法，希望對(duì)大家有幫助！

在Angular 自訂指令Tooltip 文章中，我們說(shuō)會(huì)出一篇關(guān)於sass 樣式的文章，現(xiàn)在它來(lái)了。

前端三劍客之一，層疊樣式表(Cascading Style Sheets，CSS），就是對(duì) HTML 骨架的潤(rùn)飾。但是我們透過(guò)原生寫(xiě)的樣式，會(huì)出現(xiàn)很多重複程式碼，而已邏輯不明確。

那麼，我們可以透過(guò) CSS 的擴(kuò)充語(yǔ)言來(lái)進(jìn)行編寫(xiě)維護(hù)。目前前端界比較流行的兩個(gè) CSS 擴(kuò)展語(yǔ)言是 less 和 sass。本文講解的是 sass。

less 也是差不多，sass 比較成熟

SASS 提供了兩種寫(xiě)的語(yǔ)法，一種是.scss 為後綴，另一種是.sass 為後綴。

• .scss 為後綴，語(yǔ)法用{} 修飾
• .sass 為後綴，語(yǔ)法是縮緊方式

推薦使用.scss

#專(zhuān)案整合

專(zhuān)案整合

angular 項(xiàng)目使用腳手架生成，在添加樣式這一步驟，會(huì)詢問(wèn)你寫(xiě)樣式的方式，讓你選擇：

選擇SCSS，然後確認(rèn)即可，就是這麼簡(jiǎn)單。

在 angular 中寫(xiě)樣式，可以分成元件樣式和全域樣式。 【相關(guān)教學(xué)推薦：《

angular教學(xué)

》】元件樣式

元件樣式就是元件單獨(dú)擁有，其他元件不會(huì)生效，例如，你透過(guò)ng g compoent demo 產(chǎn)生元件：

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

其中demo.compoent.scss 就是deom 這個(gè)元件的樣式表。

全域樣式

angular

鷹架產(chǎn)生的項(xiàng)目，預(yù)設(shè)在

src/style.scss

檔案存放全域的樣式。在這個(gè)文件修改的樣式，將對(duì)整個(gè)應(yīng)用程式的樣式產(chǎn)生影響。

Sass 重點(diǎn)語(yǔ)法

針對(duì)日常的開(kāi)發(fā)工作，我們來(lái)介紹下比較重要的內(nèi)容。

1. 使用變數(shù)

使用變數(shù)能夠讓你在多個(gè)頁(yè)面或頁(yè)面中的多處進(jìn)行呼叫。 <pre class='brush:php;toolbar:false;'>// _varible.scss // **** COLORS **** $black: #000000; $white: #ffffff; $dark-green: #007f7f; // **** usage **** $primary-color: $dark-green;</pre>我們將變數(shù)方式在一個(gè)檔案中管理，當(dāng)需要使用到它的使用，我們直接進(jìn)行

@import

導(dǎo)入使用即可：

@import "path/to/varible.scss";

#demo {
  color: $primary-color; // 調(diào)用
}

2. 使用巢狀

在使用css 樣式的時(shí)候，我們需要對(duì)不同元素進(jìn)行樣式的編寫(xiě)，我們需要考慮到元素所在的層次，採(cǎi)用不同的權(quán)重對(duì)其進(jìn)行修改。

現(xiàn)在有骨架如下：<pre class='brush:php;toolbar:false;'>&lt;div id=&quot;demo&quot;&gt; &lt;div class=&quot;inner&quot;&gt; &lt;span class=&quot;prefix&quot;&gt;Mr.&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;inner&quot;&gt; &lt;span class=&quot;name&quot;&gt;Jimmy&lt;span&gt; &lt;/div&gt; &lt;/div&gt;</pre>現(xiàn)在有樣式如下：<pre class='brush:php;toolbar:false;'>#demo .inner .prefix { color: red; font-size: 11px; } #demo .inner .name { font-size: 14px; }</pre>那麼我們可以使用巢狀寫(xiě)法，邏輯清晰，閱讀方便：<pre class='brush:php;toolbar:false;'>#demo { .inner{ .prefix { color: red; font-size: 11px; } .name { font-size: 14px; } } }</pre>

3. 使用計(jì)算

sass 提供了一系列的操作符，如

、-、*、/、%

，使用就就像寫(xiě)

javascript

變數(shù)運(yùn)算一樣，竟然還可以帶單位：

width: 100px / 400px * 100%l;

除了這些基本的運(yùn)算子之外，

sass

還提供了很多的方法，例如

String

函數(shù)：<pre class='brush:php;toolbar:false;'>to-upper-case(&amp;#39;italic&amp;#39;); // ITALIC</pre>又例如更改顏色的透明度方法：

#demo {
  background-color: transparentize($black, 0.5)
}

4. 使用mixin 混合器在寫(xiě)樣式的時(shí)候，我們會(huì)出現(xiàn)在多個(gè)類(lèi)別中呼叫同一份的樣式內(nèi)容。例如：

.demo {
  font-size: 12px;
  color: red;
}
.another_demo {
  font-size: 12px;
  color: blue;
}

我們使用mixin 改寫(xiě)：

@mixin common-style {
  font-size: 12px;
}

.demo {
  @include common-style;
  color: red;
}
.another_demo {
  @include common-style;
  color: blue;
}

使用

mixin

提取公共的程式碼出來(lái)，方便我們更改，改一處多處更改。當(dāng)然，

extend

即成也有這種效果。

5. 使用extend 繼承

例如，我們可以對(duì)上一個(gè)類(lèi)別的樣式進(jìn)行續(xù)寫(xiě)：原始骨架與樣式：

<span class="prefix name">Hello, Jimmy.</span>

.prefix {
  font-size: 12px;
}
.name {
  color: red;
}

###改寫(xiě)後：###

<span class="name">Hello, Jimmy.</span>

.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}

###在日常的開(kāi)發(fā)中，掌握上面的這些技能，足夠你從容應(yīng)對(duì)樣式編寫(xiě)～######【完結(jié)】#######更多程式設(shè)計(jì)相關(guān)知識(shí)，請(qǐng)?jiān)煸L：###程式教學(xué)###！ ！ ###

以上是Angular專(zhuān)案中怎麼使用 SASS 樣式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！