欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular CLI在Angular項目中如何使用scss詳解

 更新時間:2018年04月10日 08:36:56   作者:ngoing  
angular-cli自身支持Scss預(yù)處理器,Scss比css更加方便靈活,而且層次清晰,代碼整潔。下面這篇文章主要給大家介紹了關(guān)于Angular CLI在Angular項目中如何使用scss的相關(guān)資料,需要的朋友可以參考下。

前言

SCSS 是 Sass 3 引入新的語法,其語法完全兼容 CSS3,并且繼承了 Sass 的強(qiáng)大功能。也就是說,任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外,SCSS 還能識別大部分 CSS hacks(一些 CSS 小技巧)和特定于瀏覽器的語法,例如:古老的 IE filter 語法。

由于 SCSS 是 CSS 的擴(kuò)展,因此,所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。也就是說,對于一個 Sass 用戶,只需要理解 Sass 擴(kuò)展部分如何工作的,就能完全理解 SCSS。大部分?jǐn)U展,例如變量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分號和花括號而不是換行和縮進(jìn)。

Angular CLI支持多種css預(yù)處理,包括:

  • css
  • scss
  • less
  • sass
  • styl (stylus)

默認(rèn)值為css。

Angular有兩種方式指定css預(yù)處理。下面以scss為例:

新建項目指定css預(yù)處理

在新建angular項目是使用--style指定css預(yù)處理

ng new my-project --style=scss

已有項目指定css預(yù)處理

對于已有的項目,也是支持修改css預(yù)處理。

查看.angular-cli.json,在defaults配置項里有類似下面的聲明:

"defaults": {
 "styleExt": "css",
 "component": {}
}

使用set指令修改styleExt

ng set defaults.styleExt scss

如果項目統(tǒng)一使用scss,建議把項目里的css文件改為scss,記得也要修改其他文件對css文件的引用。其中styles.css的引用在.angular-cli.json里。

參考:stories css processors

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論