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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM