uni-app中使用sass


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需要安裝對應的插件,檢查和安裝如下:

 

 

 

 


免責聲明!

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



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