时间戳

首页 > 解决方案 > 使用 Sass 生成动态类

sass - 使用 Sass 生成动态类

问题描述

我想用 flexbox 创建我自己的 bootsrap。它是这样的：

.df {
  display: flex;
}
.aic {
  align-items: center;
}
.jcc {
  justify-content: center;
}
.jcsb {
  justify-content: space-between;
}
.fdc {
  flex-direction: column;
}
.fx1 {
  flex: 1;
}

但是我还想实现一件事，那就是边距和填充等的动态类。例如：

.mr-40 {
margin-right: 40;
}

所以我希望这个值（40）是动态的（1,5,100 等等）。有没有办法在 SCSS/SASS 中实现这一点？

标签： sass

解决方案

这只是一个快速实现：

@use "sass:map";

$utils: (
   "padding": (
      "className": p,
      "property": padding,
      "values": 0 10 20 30 40 50 60 70 90 100,
   ),
   "margin": (
      "className": m,
      "property": padding,
      "values": 0 10 20 30 40 50 60 70 90 100,
   ),
);

@each $key, $values in $utils {
   @each $cValue in map.get($values, "values") {
      .#{map.get($values, "className")}-#{$cValue} {
         #{map.get($values, "property")}: $cValue + "px";
      }
   }
}

.p-0 {
  padding: "0px";
}

.p-10 {
  padding: "10px";
}

.p-20 {
  padding: "20px";
}

// ...

.m-0 {
  padding: "0px";
}

// ...

推荐阅读