实现js修改sass参数 类实现伪类动态修改

问题描述

昨天写项目 遇到了一点问题，需要写个标尺 但是要根据用户输入的参数 动态改变标尺的样式，最初考虑用图片 写几个模板 来回切换class实现 ，但是ui和产品拒绝使用图片，无奈之下 就写了伪类css 来实现标尺。后来想 也就固定几个尺寸 写几个class样式切换就好了，但是最后又加了个需求，可以用户自定义，这时候问题就来了 js不能直接修改css伪类样式，无奈之下 各种请教 各种查，最后找到了解决方案，现在发出来共享一下

1. 设定sass可以直接读取的参数：

    document.getElementsByTagName('body')[0].style.setProperty('参数名','值');

1. sass 中读取参数：

    $a :var(参数名) 

这样我们就可以了， 然后还有一点小补充有可能 我们会在calc()变量计算中使用 这个动态获取的参数，那么这个时候我们就不能直接使用了，需要使用#{}来把定义的变量包起来，例：width:calc(100% - #{$a})

实现js修改sass参数 类实现伪类动态修改

原文：https://www.cnblogs.com/cesarchen/p/11217128.html