Less Scss 预处理语言
通常咱们会应用less等预处理语言来设定全局的色彩治理
color.less
// DARK-THEME@base-bg: #001f3b;// @base-bg: #042d6b;@light-font-color: rgb(219, 219, 219);@shadow-color: rgb(59, 54, 54);@menu-active-color: rgb(193, 194, 196);@table-head-color: rgba(69, 107, 150, 0.808);@btn-hover-color: #0f2035;@primary-color: #39bfed;@primary-color-opacity: #39c0ed67;@bg-content: rgba(27, 159, 225, 0.205);@bg-content-3: rgba(27, 159, 225, 0.116);有的时候某些场景咱们须要在JS中去应用这些色彩
比方咱们在应用echarts的时候，这时候咱们能够应用 :export 来导出变量
index.less
// DARK-THEME@base-bg: #001f3b;// @base-bg: #042d6b;@light-font-color: rgb(219, 219, 219);@shadow-color: rgb(59, 54, 54);@menu-active-color: rgb(193, 194, 196);@table-head-color: rgba(69, 107, 150, 0.808);@btn-hover-color: #0f2035;@primary-color: #39bfed;@primary-color-opacity: #39c0ed67;@bg-content: rgba(27, 159, 225, 0.205);@bg-content-3: rgba(27, 159, 225, 0.116);:export { primary: @primary-color; primaryOpacity: @primary-color-opacity;}component.vue
import colors from '../common/color.less'const chartOption = { xAxis: { type: 'value', splitLine: 'none', axisLine: { lineStyle: { color: colors.primary } }, }, yAxis: { type: 'category', splitLine: 'none', axisLine: { lineStyle: { color: colors['primary'] } }, },}在vue3的style中应用变量
vue2应用变量形式为传入vars
export default { data () { return { red: 'red' } }}<style lang="less" scoped vars="{red}">p { color: var(--red)}</style>vue3中咱们能够子style中间接应用v-bind(attr)来应用变量
<template> <p :class="$style.red"> Edit <code>components/HelloWorld.vue</code> to test hot module replacement. </p></template><script setup>const color = 'green'</script><style scoped module>.red { color: v-bind(color);}</style>