CSS Vue 中使用的变量

Question

是否可以在 Vue 中使用纯 CSS 变量而无需 link 任何样式表或使用 SASS/PostCSS？不确定为什么我无法让它以最基本的形式工作。

<template>
   <div id="test">
        TEST
    </div>
</template> 
<style scoped> 
   :root {
   --var-txt-color: #c1d32f;
   }

 #test {
 color: var(--var-txt-color);
  }
</style>

Answer 1

由于样式表的 scoped 属性，这将无法按预期工作。上面的例子编译成：

[data-v-4cc5a608]:root {
  --var-txt-color: #f00;
}

而且，如您所知，它不会针对实际的 :root 元素。

可以通过以下方式解决：

未使用此样式表的 scoped 属性。请注意，它可能会导致样式与 :root 元素的其他变量声明发生冲突。

使用当前组件的包装元素作为根。如果我们这样声明变量：

.test {
  --var-txt-color: #c1d32f;
  color: var(--var-txt-color);
}

.test-child-node {
  background-color: var(--var-txt-color);
}

然后它将可以为同一组件的其他元素重用变量。但是，如果是这种情况，则在不删除 scoped 的情况下无法在子组件中使用声明的变量。

Answer 2

我知道你强调了 "without having to link any stylesheet"，但我运行遇到了同样的问题，有一个简单的选择 - 只使用一个外部 css 文件并将其包含在你的 App.vue，那么您就可以在其他任何地方访问变量，也可以使用范围样式。

variables.css

:root {
  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  --primary-color: #333a4b;
}

App.vue

<style>
  @import './assets/styles/variables.css';
</style>

LandingView.vue

<style scoped>
  #landing-view {
    font-family: var(--font-family);
    font-weight: 300;
    line-height: 1.5em;
    color: var(--primary-color);
  }
</style>

Answer 3

为什么不直接使用这个？

<style scoped>
  * {
    --var-txt-color: #c1d32f;
  }
</style>

生成的CSS为：

*[data-v-d235d782] {
  --var-txt-color: #c1d32f;
}

这对我有用。

我刚刚发现它看起来也有效，使用“deep selector”

>>>  {
  --var-txt-color: #c1d32f;
}

生成的 CSS 是：

[data-v-d235d782] {
  --var-txt-color: #c1d32f;
}

我觉得我更喜欢这个方法

Answer 4

一种解决方法是在非作用域 style 元素下定义它们，如下所示。但是这里要注意的一件事是，这些变量也会暴露给其他 Vue 组件。

<style>
  :root {
     --var-txt-color: #c1d32f;
  }
</style>

<style scoped>
  #test {
     color: var(--var-txt-color);
  }
</style>

Answer 5

好了，现在你可以使用CSS变量注入了。

<template>
  <div>
    <div class="text">hello</div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            color: 'red',
            font: {
                weight: '800'
            }
        }
    }
  }
</script>

<style>
  .text {
    color: v-bind(color);
    font-weight: v-bind('font.weight');
  }
</style>

这些样式也是响应式和作用域化的。不会有任何意外的继承问题。 Vue 为您管理 CSS 变量。

你可以看看 RFC here。

Answer 6

迟到的答案 - 这是一个使用 css 从标准 vue 结构派生的变量的工作示例。

<template>
  <div>
  <component :is="'style'">
    :root {
    --color: {{ color }};
    --text-decoration: {{ textDecoration }};
    --font-size: {{ fontSize }};
    }
  </component>
    <p>example</p>
  </div>
</template>

<script>

export default {

  props:{
    color: {
      type: String,
      default: '#990000'
    }
  },

  data: function () {
    return {
      textDecoration: 'underline'
    }
  },

  computed: {
    fontSize: function (){
      return Math.round(Math.random() * (5 - 1) + 1) + 'em';
    }
  }
}
</script>

<style>
p{
  color: var(--color);
  text-decoration: var(--text-decoration);
  font-size: var(--font-size);
}
</style>

从头开始...

Vue 必须有 1 个根元素，所以我需要一个 div 标签来包含示例 p 标签。但是，您可以只使用 component-is-style 标签并去掉 div 和 p 标签。注意需要额外的引号 "'style'".
正常的 vue 样式标签可以根据需要确定范围或不确定范围。

CSS Vue 中使用的变量

CSS variables use in Vue

css

vue.js

global-variables

css-variables