如何用SCSS创建Tailwind风格的任意值工具类？

当然可以用SCSS实现类似Tailwind的任意值工具类，但要注意SCSS是预编译型CSS预处理器，和Tailwind的动态解析逻辑有差异，下面是两种可行的实现方式：

方式一：结合CSS变量实现动态任意值 #

这种方式最接近Tailwind的使用体验，通过类名匹配+自定义属性来动态设置样式：

// 宽度任意值工具类
[class^="w-["], [class*=" w-["] {
  width: var(--w-val);
}

// 高度任意值工具类
[class^="h-["], [class*=" h-["] {
  height: var(--h-val);
}

// 边距任意值工具类（以margin为例）
[class^="m-["], [class*=" m-["] {
  margin: var(--m-val);
}

使用时，需要在元素上同时设置类名和对应的CSS变量：

<div class="w-[37px]" style="--w-val: 37px"></div>
<div class="h-[50%]" style="--h-val: 50%"></div>

方式二：预生成指定范围的任意值类 #

如果不需要完全动态的任意值，可以用SCSS循环预生成指定范围内的数值类，比如生成1px到100px的宽度类：

@for $i from 1 through 100 {
  .w-[#{$i}px] {
    width: #{$i}px;
  }
  
  .h-[#{$i}px] {
    height: #{$i}px;
  }
}

编译后会生成.w-[1px]、.w-[2px]….w-[100px]这类类，直接在HTML中使用即可：

<div class="w-[37px]"></div>

注意事项 #

• SCSS预编译特性决定了它无法像Tailwind那样实时解析任意未预定义的类名，如果需要完全无限制的任意值，方式一结合CSS变量是更灵活的选择；
• 如果项目已经使用Tailwind，其实不需要额外用SCSS实现，Tailwind的任意值工具类已经足够覆盖需求。

内容的提问来源于stack exchange，提问作者Ali Raza