css中变量的使用

   :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>

定义在 test_title 下的变量 –borderColor 在他的兄弟组件 other 之中，使用是没有效果的，所以使用了公共区域的 –commonborderColor