vue 动态改变stylus里面的变量

Question

<style lang="stylus" scoped>
$width = 30px
.input {
  
  .input_default {
    outline none
    border none
    width $width
  }
  .input_border{
    border 1px solid #ddd
  }
}
</style>

打算封装一个input组件，然后input的宽度可以动态可配置，由父组件传入，stylus里面的$width = 30px 这里的30px 可以做成动态可配置的么？

Answer 1

不可以。通过 :style 来搞吧。

Answer 2

不能用Js修改stylus里边的变量，因为stylus是一种CSS的预编译器，在你的代码完成编译之后会替换所有的stylus变量为确定的值。
你可以考虑使用css的变量。MDN

Answer 3

https://www.cnblogs.com/hzz-/... css自定义属性、通过js修改css变量的值

Answer 4

props 接收父组件传值 divWidth，使用行内样式在标签里写入样式，

<div :style="{width: `${divWidth}px`}"></div>

Answer 5

如果你的项目可以转换写法，请使用 :style;另外，您仍然可以使用 css variable + stylus variable 实现，因为 css variable可以动态 change， 但是 stylus variable 是编译后就不能动态更改的。

Answer 6

内联，通过props三元运算判断动态更改