Question

例如：

<script>
    export default {
        data() {
            return{
                varinjs: 1,
            }
        }
    }
</script>
<style lang="stylus">
    varincss = varinjs

    body
      if varincss  == 0
        background-color red
      else varincss == 1
        background-color blue
</style>

有没有办法在CSS中访问javascript变量？可以使用sass或更少，但是我会更喜欢手写笔。

Answer 1

我知道这不是对“这个”问题的回答（我想发表评论），但我将尝试给出替代解决方案。

Stylus支持内置功能json(path[, options])，这意味着您可以将所有变量放入JSON文件中，并将它们同时提供给JS文件和Stylus文件。

您无法使用JS访问手写笔变量，除非找到某种将指定的js文件/变量转换为手写笔变量的构建时库，否则您将无法做到这一点。

Answer 2

您可以使用CSS自定义属性来实现。

将手写笔变量与它们绑定在一起，并仅处理JavaScript上的更改。

<script>
  export default {
    data () {
      return {
        theme: { background: '#ff0000' }
      };
    },
    watch: {
      'theme.background': { immediate: true, handler: 'applyVariables' }
    },
    methods: {
      applyVariables () {
        const scope = document.documentElement.styles;
        scope['--theme-background'] = this.theme.background;
      }
    }
  };
</script>

<style lang="stylus">
  theme-background = var(--theme-background, #ff054a);
  // The first argument is variable name and second is placeholder value.

  .theme-button
    background-color: theme-background
</style>

CSS Custom Properties reference on MDN

如何使用手写笔访问vue文件中的javascript变量？

2 个答案: