WindiCss在webpack+vue-cli的实践（二）自动值推导

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

这节从自动值推导开始，字面意思，这也是为什么前一章会说觉得更加灵活了，作为特性之一，这一功能会很常用

自动值推导

根据自动值推导的特性，举例其中背景色有多种写法，我一一把它们列举出来

  <div class="w-100 h-50 bg-[#000]"></div>
  <div class="w-100 h-50 bg-red-300"></div>
  <div class="w-100 h-50 bg-[rgba(123,123,123,0.5)]"></div>
  <div class="w-100 h-50 bg-[hsl(0,100%,50%)]"></div>
  <div class="w-100 h-50 bg-hex-511000"></div>

对应效果图

自定义

甚至可以自定义

<div class="w-100 h-50 bg-myColor-0"></div>

bg-myColor-0渲染后：

.bg-myColor-0 {
  background-color: #E8F4FF;
}

此处为自定义，在windi.config.js配置

export default {
  theme: {
    extend: {
      colors: {
        myColor: {
          0: '#E8F4FF',
        },
      },
    },
  },
  shortcuts: {},
};

也可以text-myColor-0，渲染后

.text-myColor-0 {
    color: #E8F4FF;
}

尺寸 rem | em | px | vh | vw | ch | ex

对于指定px、rem等单位，可以这么写

<div class="w-10px h-10 mt-10px bg-[#000]"></div>
<div class="w-20px h-10 mt-10px bg-[#000]"></div>
<div class="w-30px h-10 mt-10px bg-[#000]"></div>
<div class="w-1rem h-10 mt-10px bg-[#000]"></div>
<div class="w-2rem h-10 mt-10px bg-[#000]"></div>
<div class="w-3rem h-10 mt-10px bg-[#000]"></div>

其页面表现如下

备注：

w-10px和 w-[10px] 的写法都有效
但w-10获得的结果却不一样，w-10将渲染为

.w-10 {
  width: 2.5rem;
}

也就是10/4rem

百分比

对于百分比，可以这样

<div class="w-200 h-50 flex">
  <div class="text bg-red-200 w-30/100">111</div>
  <div class="text bg-blue-200 w-70/100">222</div>
</div>

w-30/100对应的百分比为30%
w-70/100对应的百分比为70%
也可以自己定义

其页面表现如下

总结

以上所有例子的实践包含了自动值推导的大部分场景，稍微变换一下便可以实现其他的样式，但写法有很多重复的地方，这是有解决方法的，在下一节用实践举例