添加自定义样式(scss)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在项目里需要用到一些自定义的样式 .. 你可以单独把样式放在组件的样式表里,也可以把样式放在全局范围 .. 比如我想在按钮的上边还有下边添加点外边距 ..

在项目的 src 下面,新建一个 scss 文件 .. 放在 assets .. styles 的下面,名字可以叫 _utilities.scss ..

在它里面,添加一个类选择器 .. my-3 .. 设置一下,上下的外边距 .. margin-top 设置成 $spacing-v-md ... 这个 spacing-v-md 是在 Taro UI 里定义的一个变量 ..

在项目的 node_modules .. taro-ui .. dist .. style .. variables .. 打开 default.scss .. 这个文件里就是 Taro UI 里面的变量 ..

在这里可以找到 $spacing-v-md 这个变量具体的值 .. 它是 9px 又乘以了一个 $hd .. 这个 $hd 的值默认是 2 ...

打开 styles 目录下面的 app.scss .. @import 一下刚才创建的这个 utilities .. 注意如果你修改了在这个文件里导入的其它的 scss 文件 .. 你要回到这个文件,保存一下 .. 这样才会触发编译这个样式 ..

然后在 index 页面上用一下这个类 .. 在这几个按钮上面,添加 className 属性 .. 它的值设置成 my-3 .. 保存一下 ..

现在页面上这几个按钮之间会留出点空间来 .. 因为它们上面用了 my-3 这个类 .. 这个类的样式就是在元素上面添加点外边距 ..

因为我们现在运行的是微信小程序开发 .. 所以 Taro 会把 scss 编译成 wxss 样式 .. 打开 dist .. 找到 app.wxss ..

浏览到文件的底部 .. 上面的样式是 Taro UI 的样式 .. 最下面这个是我们自己定义的样式 .. 这里 margin-top 的值会是 18rpx ..

再去修改一下这个 utilities .. 给这个 my-3 再添加一个 margin-bottom .. 用一下 spacing-v-md 这个变量的值 ..

回到 app 这个样式表,保存一下 .. 这样会重新编译样式 .. 再到编译好的样式这里检查一下 .. 你会发现 my-3 里面多了一条 margin-bottom 样式 ..

添加自定义样式(scss)《 电商小程序案例:准备 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点