uni-app在創建時,工程目錄下會有個uni.scss文件,我們可以直接在里面定制化scss變量。
全局scss中的坑:
(有些問題可能被修復了,具體自己看打包編譯后的文件,uniapp一直在完善)
1、如果要引用全局外部scss文件,可以考慮在uni.scss這個系統全局scss文件內引用,其他地方引用暫不生效。
注意:在uni.scss文件中的scss樣式,在打包微信小程序時會給每個vue頁面的css文件都加上這些樣式,如果樣式過多會造成項目體積過大無法編譯二維碼。
2、使用全局scss樣式可以直接寫在App.vue里面的style標簽里,記得給style標簽加上lang="scss"。
使用方法:在vue文件下的style標簽添加lang="scss"屬性即可。
基本用法講解:
1、可以直接使用scss文件那邊對應的變量值,比如單位大小、顏色,單位大小可以使用運算符進行基本運算。
2、使用scss后,對於同一個父元素下的元素,可以直接在該父元素選擇器下,以層級嵌套來使用。
3、可以使用“&”符號來拼接選擇器,“&”相當於父選擇器占位符,如下解析為: .top_block_word
4、在scss中使用@mixin定義方法,用@include調用(具體去官網自己看),單個頁面引用scss文件:@import './style/mixin.scss';
Hbuilder中使用到了scss需要安裝對應的插件,檢查和安裝如下: