1、 什麼是CSS前處理器
CSS 前處理器用一種專門的程式語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 檔案，以供專案使用。CSS 前處理器為 CSS 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題。CSS預處理語言有SCSS (SASS) 和LESS等等，總之都是用來實現樣式的。
2、lang
因此lang的屬性可選：scss（sass）、less等等
即：<style lang="scss">
3、scss和sass的區別
scss是sass的一個升級版本，兩者都是用來實現樣式的，只是語法有各自的不同點。
註明：使用這個lang的屬性需要安裝scss（sass）
4、scoped屬性

Vue中的style 的lang=" "和scpoed

普通的style標籤只支援普通的樣式，如果想啟用scss或者less，需要為style元素設定lang屬性

1 <style lang="scss" scoped>
2 /* 普通的 style 標籤只支援 普通的 樣式，如果想要啟用 scss 或 less ，需要為 style 元素，設定 lang 屬性 
 
*/
3 // 只要 咱們的 style 標籤， 是在 .vue 元件中定義的，那麼，推薦都為 style 開啟 scoped 屬性
4 body {
5   div {
6     font-style: italic;
7   }
8 }
9 </style>

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裡面怎麼定義全域性的變數上述的公共樣式就是一個解決方案，不過看到一些其他解決方案，也可以參考下：https://www.imooc.com/article/28195