首頁  >  文章  >  web前端  >  淺析Angular專案中使用 SASS 樣式的方法

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

青灯夜游
青灯夜游轉載
2022-11-11 18:33:041689瀏覽

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

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

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

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

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

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

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

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

推薦使用.scss

#專案整合

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

專案整合

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. 使用變數

使用變數能夠讓你在多個頁面或頁面中的多處進行呼叫。 <pre class="brush:js;toolbar:false;">// _varible.scss // **** COLORS **** $black: #000000; $white: #ffffff; $dark-green: #007f7f; // **** usage **** $primary-color: $dark-green;</pre>我們將變數方式在一個檔案中管理,當需要使用到它的使用,我們直接進行

@import

導入使用即可:

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

#demo {
  color: $primary-color; // 调用
}

2. 使用巢狀

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

現在有骨架如下:<pre class="brush:html;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>現在有樣式如下:<pre class="brush:js;toolbar:false;">#demo .inner .prefix { color: red; font-size: 11px; } #demo .inner .name { font-size: 14px; }</pre>那麼我們可以使用巢狀寫法,邏輯清晰,閱讀方便:<pre class="brush:js;toolbar:false;">#demo { .inner{ .prefix { color: red; font-size: 11px; } .name { font-size: 14px; } } }</pre>

3. 使用計算

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

、-、*、/、%

,使用就就像寫

javascript

變數運算一樣,竟然還可以帶單位:

width: 100px / 400px * 100%l;
除了這些基本的運算子之外,

sass

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

String

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

#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中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除