scss、css样式中使用变量的方法；Vue动态改变css等样式文件中的变量

目录

一、问题

二、原因及解决方法

三、总结

一、问题

1.遇到一些样式 设置的值都是重复的不想重复写，想和js一样定义一个常量，然后直接引用这个常量。

2.想要在js中动态设置样式中的值，在 css、scss等样式表中直接使用。

二、原因及解决方法

1.css中直接定义并使用常量

1）代码如下：

<style>
.asset-wrap .title-area {
  --size:100px;
  height: var(--size);
  width: var(--size);
  line-height: var(--size);
}
</style>

2）效果如图2-1所示

2.vue动态改变css等样式文件中的变量

  1）在template模板中 相应的dom上添加 :style="{--变量:变量}"

  2）在css等样式表中直接引用 --变量即可

  3)  变量是响应式的（data中声明过或者ref、reactive定义的），则变量的值发生变化时，对应的css样式也会一起变化。

   4）代码如下：如果想在vue中动态改变size的大小，把'60px'改成变量（例如size)，在需要的时候改变size的值即可。

<div class="asset-map">
    <div class="title-area" :style="{'--size':'60px'}" >
    </div>
</div>

<style>
.asset-wrap .title-area {
  height: var(--size);
  width: var(--size);
  line-height: var(--size);
}
</style>

 5）效果如图2-2所示：

3.  1和2两种方式中，父类中定义的常量,子类也可以直接使用！ 

代码如下：

<style lang='scss' scoped>
.asset-wrap {
  --size: 90px;
  .title-area {
    height: var(--size);
    width: var(--size);
  }
}
</style>

三、总结

1.在 css等样式表或 html的style属性 中 声明 变量 --var:xxx,在css中就可以直接引用 --var的值。

2.我之前写了二、2中的用法，今天看 别人的源码发现，css等样式表中也可以直接用常量，道理是类似的。还有子类中也可以直接使用父类中已经定义过的变量。特来总结一下！

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/