淺析Angular專案中使用 SASS 樣式的方法

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

在Angular 自訂指令Tooltip文章中，我們說會出一篇關於sass樣式的文章，現在它來了。

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

那麼，我們可以透過CSS的擴充語言來進行編寫維護。目前前端界比較流行的兩個CSS擴展語言是less和sass。本文講解的是sass。

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

SASS提供了兩種寫的語法，一種是.scss為後綴，另一種是.sass為後綴。

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

推薦使用.scss

#專案整合

angular項目使用腳手架生成，在添加樣式這一步驟，會詢問你寫樣式的方式，讓你選擇：

選擇SCSS，然後確認即可，就是這麼簡單。

在angular中寫樣式，可以分成元件樣式和全域樣式。 【相關教學推薦：《

》】元件樣式

元件樣式就是元件單獨擁有，其他元件不會生效，例如，你透過ng g compoent demo產生元件：

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

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

全域樣式

鷹架產生的項目，預設在

檔案存放全域的樣式。在這個文件修改的樣式，將對整個應用程式的樣式產生影響。

Sass 重點語法

針對日常的開發工作，我們來介紹下比較重要的內容。

1. 使用變數

使用變數能夠讓你在多個頁面或頁面中的多處進行呼叫。

// _varible.scss // **** COLORS **** $black: #000000; $white: #ffffff; $dark-green: #007f7f; // **** usage **** $primary-color: $dark-green;

導入使用即可：

@import "path/to/varible.scss"; #demo { color: $primary-color; // 调用 }

在使用css樣式的時候，我們需要對不同元素進行樣式的編寫，我們需要考慮到元素所在的層次，採用不同的權重對其進行修改。

現在有骨架如下：

<div id="demo"> <div class="inner"> <span class="prefix">Mr.</span> </div> <div class="inner"> <span class="name">Jimmy<span> </div> </div>

#demo .inner .prefix { color: red; font-size: 11px; } #demo .inner .name { font-size: 14px; }

#demo { .inner{ .prefix { color: red; font-size: 11px; } .name { font-size: 14px; } } }

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

，使用就就像寫

變數運算一樣，竟然還可以帶單位：

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

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

函數：

to-upper-case('italic'); // ITALIC

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

4. 使用mixin 混合器在寫樣式的時候，我們會出現在多個類別中呼叫同一份的樣式內容。例如：

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

我們使用mixin改寫：

@mixin common-style { font-size: 12px; } .demo { @include common-style; color: red; } .another_demo { @include common-style; color: blue; }

使用

提取公共的程式碼出來，方便我們更改，改一處多處更改。當然，

即成也有這種效果。

例如，我們可以對上一個類別的樣式進行續寫：原始骨架與樣式：

Hello, Jimmy.

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

Hello, Jimmy.

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

以上是淺析Angular專案中使用 SASS 樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！