1

在 Sass 中有没有办法用连字符拆分变量/类的列表？
这是一个模糊的问题标题，所以我最好展示我正在努力实现的目标。

在下面的示例中，我尝试创建一些可以应用于 HTML 元素的实用程序类，以帮助处理垂直节奏。

例如，我可能想给一个元素一个与我的垂直节奏策略一致的小边距，因此我将添加类 .mts（代表 margin-top-small）。

然后，我想针对每个媒体查询输出这些实用程序类的版本，以进行细粒度控制，例如，我可能想要一个类.m-t-s-768，当最小视口宽度为 768 像素时，该类将添加一个小的上边距。

我在下面实现了这一点，但这是一种非常冗长且重复的方式。任何人都可以提出更简洁的方法吗？

Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;

$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;

Creating the classes
–––––––––––––––––––––
.m-t-s {
  margin-top: $s;
}

/* Create versions for each defined media query */
@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16px)) {
    .m-t-s-#{$mediaQuery} {
      margin-top: $s;
    }
  }
}

.m-t-m {
  margin-top: $m;
}

/* Create versions for each defined media query */
@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16px)) {
    .m-t-m-#{$mediaQuery} {
      margin-top: $m;
    }
  }
}

这也重复.m-t-l了（margin top large），然后它继续填充类（例如.p-t-s等等），所以它变成了一个很长的实用程序类列表。

4

1 回答 1

2

要以编程方式生成该输出，您需要另一个列表和一个内部循环：

$mediaQueries-px:
640,
768,
1024
;

$s: 20px;
$m: 50px;
$l: 60px;

$sizes: s $s, m $m, l $l;

@each $size in $sizes {
    .m-t-#{nth($size, 1)} {
      margin-top: nth($size, 2);
    }
}

@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
    @each $size in $sizes {
        .m-t-#{nth($size, 1)}-#{$mediaQuery} {
          margin-top: nth($size, 2);
        }
    }
  }
}

输出：

.m-t-s {
  margin-top: 20px;
}

.m-t-m {
  margin-top: 50px;
}

.m-t-l {
  margin-top: 60px;
}

@media screen and (min-width: 40em) {
  .m-t-s-640 {
    margin-top: 20px;
  }

  .m-t-m-640 {
    margin-top: 50px;
  }

  .m-t-l-640 {
    margin-top: 60px;
  }
}
@media screen and (min-width: 48em) {
  .m-t-s-768 {
    margin-top: 20px;
  }

  .m-t-m-768 {
    margin-top: 50px;
  }

  .m-t-l-768 {
    margin-top: 60px;
  }
}
@media screen and (min-width: 64em) {
  .m-t-s-1024 {
    margin-top: 20px;
  }

  .m-t-m-1024 {
    margin-top: 50px;
  }

  .m-t-l-1024 {
    margin-top: 60px;
  }
}
于 2013-04-15T14:25:51.810 回答