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 中寫樣式，可以分成元件樣式和全域樣式。 【相關教學推薦：《
angular教學
》】元件樣式
元件樣式就是元件單獨擁有，其他元件不會生效，例如，你透過ng g compoent demo 產生元件：
- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts
登入後複製
其中demo.compoent.scss 就是deom 這個元件的樣式表。
全域樣式
angular
鷹架產生的項目，預設在
src/style.scss
檔案存放全域的樣式。在這個文件修改的樣式，將對整個應用程式的樣式產生影響。
Sass 重點語法
1. 使用變數
使用變數能夠讓你在多個頁面或頁面中的多處進行呼叫。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;</pre><div class="contentsignin">登入後複製</div></div>我們將變數方式在一個檔案中管理，當需要使用到它的使用，我們直接進行
@import
導入使用即可：
@import "path/to/varible.scss";
#demo {
color: $primary-color; // 调用
}登入後複製
2. 使用巢狀
在使用css 樣式的時候，我們需要對不同元素進行樣式的編寫，我們需要考慮到元素所在的層次，採用不同的權重對其進行修改。
現在有骨架如下：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div id="demo">
<div class="inner">
<span class="prefix">Mr.</span>
</div>
<div class="inner">
<span class="name">Jimmy<span>
</div>
</div></pre><div class="contentsignin">登入後複製</div></div>現在有樣式如下：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">#demo .inner .prefix {
color: red;
font-size: 11px;
}
#demo .inner .name {
font-size: 14px;
}</pre><div class="contentsignin">登入後複製</div></div>那麼我們可以使用巢狀寫法，邏輯清晰，閱讀方便：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">#demo {
.inner{
.prefix {
color: red;
font-size: 11px;
}
.name {
font-size: 14px;
}
}
}</pre><div class="contentsignin">登入後複製</div></div>
3. 使用計算
sass 提供了一系列的操作符，如
、-、*、/、%
，使用就就像寫
javascript
變數運算一樣，竟然還可以帶單位：width: 100px / 400px * 100%l;
登入後複製
sass
還提供了很多的方法，例如
String
函數：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">to-upper-case(&#39;italic&#39;); // ITALIC</pre><div class="contentsignin">登入後複製</div></div>又例如更改顏色的透明度方法：
#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;
}登入後複製
使用
mixin
提取公共的程式碼出來，方便我們更改，改一處多處更改。當然，
extend
即成也有這種效果。
5. 使用extend 繼承
例如，我們可以對上一個類別的樣式進行續寫：原始骨架與樣式：
<span class="prefix name">Hello, Jimmy.</span>
登入後複製
.prefix {
font-size: 12px;
}
.name {
color: red;
}登入後複製
###改寫後：###
<span class="name">Hello, Jimmy.</span>
登入後複製
.prefix {
font-size: 12px;
}
.name {
@extend .prefix
color: red;
}登入後複製
###在日常的開發中，掌握上面的這些技能，足夠你從容應對樣式編寫～######【完結】#######更多程式設計相關知識，請造訪：###程式教學###！ ！ ###
以上是淺析Angular專案中使用 SASS 樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
