Sass 每个 Map 循环都带有默认变体的修饰符类

Question

我很难避免重复代码。

我有一个可以使用大小修饰符来改变元素外观的元素：sm、md、lg。假设我的元素名为

.element

，我的大小修饰符类名为

.size-sm

、

.size-md

和

.size-lg

。

但是，这些尺寸类别不是必需的。在这种情况下，元素应该使用 md 类中的属性作为默认值。换句话说：

.element

和

.element.size-md

应该给出相同的结果。

我的Sass Map如下：

$elementSizes: (
  sm: (
    fontSize: 0.875rem,
    height: 42px,
  ),
  md: (
    fontSize: 1rem,
    height: 48px,
  ),
  lg: (
    fontSize: 1.125rem,
    height: 54px,
  ),
);

我的循环目前如下：

.element {
  @each $size, $values in $elementSizes {
    @if $size == md {
      &,
      &.size-#{$size} {
        font-size: map-get($values, fontSize);
        height: map-get($values, height);
      }
    } @else {
      &.size-#{$size} {
        font-size: map-get($values, fontSize);
        height: map-get($values, height);
      }
    }
  }
}

如您所见，我检查循环的对象是否名为“md”，然后还使用

&

将其值应用到父元素。但它要求我将所有属性应用两次，这是我想避免的。 if 或 else 中应用的属性绝对没有区别。

任何尝试优化此问题的帮助都将受到赞赏！

Answer 1

您有多种可能性可以做到这一点。例如：

1。与

append()

@use 'sass:list';

.element {
  @each $size, $values in $elementSizes {
    $selector: "&.size-#{$size}";
    
    @if $size == md {
      $selector: list.append("&", $selector, $separator: comma); 
    }
    
    #{$selector} {
      font-size: map-get($values, fontSize);
      height: map-get($values, height);
    }
  }
}

2。使用三元运算符：

.element {
  @each $size, $values in $elementSizes {
    $default: if($size == md, "&,", "");
    
    #{$default}&.size-#{$size} {
      font-size: map-get($values, fontSize);
      height: map-get($values, height);
    }
  }
}