一、配置變量css文件
src/styles/variables.scss文章來源：http://www.zghlxwxcb.cn/news/detail-734446.html
// 設(shè)置色值變量
// 1、繼承body中設(shè)置的樣式內(nèi)嵌style="--baseColor:#0075FF;"
// 一般常用于Saas系統(tǒng)，如qiankun框架主應用決定子應用的樣式
$primary: var(--baseColor, #0075FF); // 主色調(diào)，可設(shè)置默認值
// 2、普通的設(shè)置一個常量色值
$blue: #324157;
// 導出色值變量
:export {
primary: $primary;
blue: $blue;
}二、在組件中使用變量文章來源地址http://www.zghlxwxcb.cn/news/detail-734446.html
//Scss
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.div {
color: $primary;
}
</style>// Js中使用
<template>
<div :style="color: variables.blue"></div>
</template>
<script>
import variables from '@/styles/variables.scss'
export default {
data() {
return {
variables
}
}
}
</script>到了這里，關(guān)于關(guān)于css中設(shè)置變量用于全局Css或者Js中使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
