css中变量的使用

最新推荐文章于 2024-07-27 14:45:10 发布

weixin_43910427

最新推荐文章于 2024-07-27 14:45:10 发布

阅读量291

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_43910427/article/details/108759211

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Vue的 scoped 样式中，样式变量如何在不同组件间生效的问题。通过示例展示了变量定义在不同层级下的作用域限制，以及如何使用公共变量确保在兄弟组件间的样式应用。重点讨论了CSS变量（如 --bgColor 和 --textColor）在 scoped 样式下的行为，以及如何在组件之间共享和继承这些变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   :root{
     --bgColor:#aad;
     --textColor:red;
   }
   .test_title{
     color:var(--bgColor);
     color:var(--textColor);
     background: var(--bgColor,blue);
   }

在vue的style中，

	<style scoped ></style>
	<!--如果加上scoped就会不生效-->

样式变量的作用域：

	<template>
	  <div class="test_var">
	    <div class="test_title" >
	      test_title
	    </div>
	    <div class="other">other</div>
	  </div>
	</template>
	
	<script>
	export default {
	 
	}
	</script>
	
	<style lang="scss">
	  .test_title{
	    --borderColor:green;
	  }
	  :root{
	    --bgColor:#aad;
	    --textColor:red;
	    --commonborderColor:pink;
	  }
	  .test_title{
	    color:var(--bgColor);
	    color:var(--textColor);
	    background: var(--bgColor,blue);
	    border:1px solid var(--borderColor);
	  }
	  .other{
	    border:1px solid var(--commonborderColor)
	  }
	</style>