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屬性
scoped是指定樣式的局部作用域。
在vue中：App.vue相當於根容器，不設置scoped。所以一般在App.vue中引用公共樣式。而在其它.vue頁面中用scoped，代表當前樣式只作用於當前.vue頁面。不作用於其它.vue頁面。
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