scss中定义的变量如何根据屏幕尺寸进行改变？

Question

scss中设置了如下

$bar--width : 180px;

默认是180px，有没有什么办法能让这个值可以根据屏幕尺寸进行改变？

Answer 1

stylus写法，你可以参考一下
方法一：

test($width)
    width: $width
    height: $width
    background: red
@media screen and (max-width: 600px)
    $width = 100px
    .one-class
        test($width)
@media (max-width: 2000px) and (min-width: 600px)
    $width = 200px
    .one-class
        test($width)

方法二：

$width = {
    small: 100px,
    medium: 200px,
    large: 300px
}
test($width)
    width: $width
    height: $width
    background: red
@media screen and (max-width: 600px)
    .one-class
        test($width.small)
@media (max-width: 2000px) and (min-width: 600px)
    .one-class
        test($width.large)

Answer 2

• 使用vw单位可以实现
• CSS媒体查询可以实现
• 使用js也可以实现