SASS和SCSS標籤詳解與scoped局部和全局的使用

首先，學會使用sass：

1.先下載和安裝node-sass和一些加載器

$ cnpm install sass-loader node-sass vue-style-loader --D

2.配置webpake加載器:webpack.base.config.js //從這一段上面是默認的！不用改！下面是沒有的須要你手動添加，至關因而編譯識別sass!

{ test: /\.scss$/, loaders: ["style", "css", "sass"] }

3.在須要用到sass的地方添加lang=scss

<style lang="scss" scoped> 。。。。。。。 <style>

---

以上是獨立裝sass的過程，通常項目在構建的時候會在package.json裏面提早引入了node-sass和加載器，webpack也默認配置了加載器，具體參考項目裏面的配置。

sass和scss

注意：sass和scss是兩個不一樣的東西！只是類似！sass借鑑了ruby語言的規範很嚴格！代碼裏面也沒有大括號！這對於習慣用css{}的前端人員很難適應！因而就出現了scss!完美兼容css!還能有sass的功能！ 若是用的是webpack-simple模版用sass的話就是lang="sass",sass是沒有{}括號的，若是有{}會抱錯。 webpack模版的話就是用lang="scss"

---

如下是關於sass的引入和使用，下面討論一些關於sass在項目裏面如何結構化，和模塊化的使用：

1：分散式（參考大部分的後臺系統） 分散式是vue官網推薦的一種方式，就是每一個模塊是一個獨立的.vue文件，裏面包含template模版，js，css，這三種都用標籤封裝起來，成爲一個vue實例，實例解析的時候逐步解析每一個標籤的內容，因此這個vue文件裏面的sass是局部的，只有這個實例界面生效，通常在標籤上面加scoped來局部化，去掉scoped就會變成全局樣式。

【好處：】每一個vue界面樣式獨立開發，互不影響，定位問題和改界面樣式的話都比較方便，好找

【弊端：】界面被scoped局部化以後，不能覆蓋界面裏面的子組件樣式，由於樣式只對當前界面生效。（能夠加/deep/解決）

【公共樣式和變量：】公共樣式和公共變量通常定義在外面，每一個界面要用的時候都須要引入（import）

2：集中式（參考大部分的前臺系統） 集中就是把全部模塊的樣式都抽離出來作獨立的.scss文件，每一個模塊裏面不寫scss標籤，寫一個公共的scss文件(app.scss)把全部模塊的樣式按照順序都引入一遍（先引公共變量，在引公共樣式，最後引入每一個模塊），最後在app.vue裏面或者main.js主入口裏面import app.scss。最後界面就一個style標籤

【好處：】全部樣式集中管理，樣式之間能夠互相覆蓋，能夠隨意覆蓋子組件樣式，公共變量和公共樣式能夠隨意使用。

【弊端：】全部模塊都須要獨立的樣式文件，致使樣式文件過多很差管理，互相覆蓋容易產生bug（爲了避免互相覆蓋，每一個樣式都須要寫在 父樣式的嵌套裏面，引入的時候也須要注意順序），

【公共樣式和變量：】公共樣式和公共屬性會在引入根樣式文件（app.scss）裏面第一個引入，這樣後面引入的樣式就能夠隨意使用。

---

關於sass裏面怎麼定義全局的變量上述的公共樣式就是一個解決方案，不過看到一些其餘解決方案，也能夠參考下：www.imooc.com/article/281…