利用css var函数让你的组件样式输出规范样式API，可定制性更高；

我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况； 比如下列代码，我们需要把ant的分页样式进行高度自定义，就得使用deep去修改； 这种实现方式确实能够达到我们的目的，但在开发时确总觉得不太合适：1、他属于强行入侵组件内部去修改，虽然不会有大问题，但总觉得这种取巧方式有点不可取。2、每次写deep时需要手动检查DOM元素进行编辑，UI文档中并不会有相关API文档； 为了解决心中的这两个结症，趁最近写组件的机会探索了下CSS 的var函数，发现他可以很好的解决以上问题。 利用var函数我们可以具体解决组件开发的以下问题： 1、组件样式自定义可以更加个性化 2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开； 3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找 4、不会侵入式的改动组件内部样式 5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep; 看下面需求,是如何利用css var函数实现一个可自定义大小，颜色，以及子元素样式的卡片 上代码

//Card.vue<template>    <div class="card">        <img class="card-img" :src="img" />        <p class="card-desc">{{ desc }}</p>    </div></template><style lang="scss" scoped>    .card {        // 这些以"--"开头的变量就是我们开放可自定义的样式属性了，可以在组件使用文档中明确开放        //卡片根元素样式        --width: 150px;        --height: auto;        --border-size: 1px;        --border-color: #ccc;        --border-radius: 5px;        --bg: #eee;        // 图片可定样式        --img-width: 130px;        --img-height: 130px;        --img-radius: 50%;        // 卡片描述样式        --desc-size: 16px;        --desc-line-height: 32px;        --desc-color: #333;        height: var(--height);        width: var(--width);        border: var(--border-size) solid var(--border-color);        border-radius: var(--border-radius);        background: var(--bg);        padding: 10px;        &-img {            width: var(--img-width);            height: var(--img-height);            border-radius: var(--img-radius);            overflow: hidden;        }        &-desc {            font-size: var(--desc-size);            color: var(--desc-color);            line-height: var(--desc-line-height);            text-align: center;        }    }</style>

 

这时候我们在API文档则可明确规定样式定制属性了：组件使用方式：

//demo.vue<template>    <div >        <Card desc="我是默认的样式我是默认的样式我是默认的样式" :img="img" />        <Card class="card_1" desc="自定义样式，子元素图片变小了" :img="img" />        <Card class="card_2" desc="自定义样式，圆角没了，描述字变小了，高度高了" :img="img" />    </div></template><ｓｃｒｉｐｔ>...</ｓｃｒｉｐｔ><style lang="scss" scoped>    .card_1 {        --width: 100px;        --height: 200px;        --border-radius: 20px;        --img-width: 80px;        --img-height: 50px;        --img-radius: 10px;        --desc-color: #f00;        --desc-size: 12px;        --desc-line-height: 21px;    }    .card_2 {        --height: 300px;        --border-radius: 0px;        --bg: #fff;        --img-radius: 50px;        --desc-size: 14px;        --desc-line-height: 21px;    }</style>

 

以上就是一个基本的组件实现；还种情况我们在使用UI库时也会碰到需要使用Props传过来计算的参数，比如下列代码：

 这种我们也可以把这些全提出来使用style属性。让样式与js参数彻底隔离

//demo.vue  <template>        <card            desc="我是默认的样式我是默认的样式"            :img="img"            :style="hoverStyle"            @mouseout="hoverStyle = {}"            @mouseover="handleHover"        /></template><ｓｃｒｉｐｔ setup>    let hoverStyle = ref({});    const handleHover = () => {        hoverStyle.value = { '--bg': '#f0f', '--width': '180px' };    };</ｓｃｒｉｐｔ>

 

我们在组件内

JS可以使用props.style获取到设置的值,css中可以使用calc变量与var结合去计算你想要的值

//card.vue<template>    <div class="card" :style="style">        {{ width }}        <img class="card-img" :src="img" />        <p class="card-desc">{{ desc }}</p>    </div></template><ｓｃｒｉｐｔ setup>    const $props = defineProps({        img: {            type: String,            default: '',        },        desc: {            type: String,            default: '',        },        style: {            type: Object,            default: () => ({}),        },    });    //假如你在js中需要用到宽度    let width = computed(() => {        return parseInt($props.style['--width'] || 150);    });</ｓｃｒｉｐｔ><style lang="scss" scoped>.card{    ...    //假如你有个子级元素需要基于宽度计算    .item{        width: calc(var(--width) - 100)    }    ...}</style>

 

但是这种实现有命名空间的问题所以需要稍微注意下变量命名，最好加独有的命名规则。防止变量覆盖；

//比如这样.ch-card{    --ch-card-width:100px;    --ch-card-height:100px;}

 

总结下这种方案的优缺点：优点1、组件样式自定义可以更加个性化2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开；3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找4、不会侵入式的改动组件内部样式5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep; 缺点：1、开发组件时会工作量会增大，但是磨刀不误砍柴功2、命名空间问题导致命名会有点长。 欢迎分享更好的解决方案。