CSS动态配置class名

最新推荐文章于 2024-05-03 15:15:35 发布

只有我知、

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量639

点赞数

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/weixin_53386810/article/details/126620969

版权

$values: 5, 8, 10, 12, 15, 16, 20, 24;
// class的key和对应的属性
$names: (
  p: padding,
  m: margin,
  pt: padding-top,
  pr: padding-right,
  pb: padding-bottom,
  pl: padding-left,
  mt: margin-top,
  mr: margin-right,
  mb: margin-bottom,
  ml: margin-left
);
//遍历生成,比如.pl10{padding-left:10px;}
@each $key, $name in $names {
  @each $num in $values {
    .#{$key}#{$num} {
      #{$name}: $num * 1px;
    }
  }
}
// 放在全局CSS