查看: 90|回覆: 0

uni-app中使用sass

[複製鏈接]

3

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2011-7-5
發表於 2019-12-19 10:31:00 | 顯示全部樓層 |閲讀模式

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需要安装对应的插件,检查和安装如下:

 

 

 

 

回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部