Angular項(xiàng)目中如何使用SASS樣式

這篇文章主要講解了“Angular項(xiàng)目中如何使用SASS樣式”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular項(xiàng)目中如何使用SASS樣式”吧！

在 Angular 自定義指令 Tooltip 文章中，我們說會(huì)出一篇關(guān)于 sass 樣式的文章，現(xiàn)在它來了。

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

那么，我們可以通過 CSS 的擴(kuò)展語言來進(jìn)行編寫維護(hù)。目前前端界比較流行的兩個(gè) CSS 擴(kuò)展語言是 less 和 sass。本文講解的是 sass。

less 也是差不多，sass 更加成熟

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

• .scss 為后綴，語法用 {} 修飾

• .sass 為后綴，語法是縮緊方式

推薦使用 .scss

項(xiàng)目集成

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

選擇 SCSS，然后確認(rèn)即可，就是這么簡單。

在 angular 中編寫樣式，可以分為組件樣式和全局樣式。

組件樣式就是組件單獨(dú)擁有，其他組件不會(huì)生效，比如，你通過 ng g compoent demo 生成組件：

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

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

全局樣式

angular 腳手架生成的項(xiàng)目，默認(rèn)在 src/style.scss 文件存放全局的樣式。在這個(gè)文件修改的樣式，將對(duì)整個(gè)應(yīng)用的樣式產(chǎn)生影響。

Sass 重點(diǎn)語法

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

1. 使用變量

使用變量能夠讓你在多個(gè)頁面或者頁面中的多處進(jìn)行調(diào)用。

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

我們將變量方式在一個(gè)文件中進(jìn)行管理，當(dāng)需要使用到它的使用，我們直接進(jìn)行 @import 導(dǎo)入使用即可：

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

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

2. 使用嵌套

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

現(xiàn)在有骨架如下：

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

現(xiàn)在有樣式如下：

#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;
    }
  }
}

3. 使用計(jì)算

sass 提供了一系列的操作符，如 +、-、*、/、%，使用就像寫 javascript 變量運(yùn)算一樣，竟然還可以帶單位：

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

除了這些基本的運(yùn)算符之外，sass 還提供了很多的方法，比如 String 函數(shù)：

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

又例如更改顏色的透明度方法：

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

4. 使用 mixin 混合器

在編寫樣式的時(shí)候，我們會(huì)出現(xiàn)在多個(gè)類中調(diào)用同一份的樣式內(nèi)容。比如：

.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 提取公共的代碼出來，方便我們更改，改一處多處更改。當(dāng)然，extend 即成也有這種效果。

5. 使用 extend 繼承

比如，我們可以對(duì)上一個(gè)類的樣式進(jìn)行續(xù)寫：

原骨架和樣式：

<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項(xiàng)目中如何使用SASS樣式”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular項(xiàng)目中如何使用SASS樣式這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！