stylus 使用小技巧（1）

mixins.styl

$pink_color = #fc566a
$yellow_color = #fee246

add(a)
    a = unit(a, rem)

pic_position($width, $height, $top, $left)
    width add($width)
    height add($height)
    top add($top)
    left add($left)

home.vue

<style lang="stylus" scoped>
@import '../assets/css/mixins.styl'
//使用举例
.rule
    pic_position(3.7, 1.1, 4.5, 14)
　　　　color $yellow_color

</style>

 

stylus使用element ui 组件时修改样式不生效

1、将scoped去掉

2、使用 >>>     例如 .el-collapse  >>> .el-collapse-item {color: $yellow_color}

scoped

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。

参考资料 https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral

深度作用选择器  >>>

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符

<style scoped>

.a >>> .b { /* ... */ }

</style>

参考资料  https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html?q=