Question

我想使用SASS为基本字体设置创建类。我已经完成了管理，我可以在任何类的嵌套映射中包含我的$ font-types，包括响应式媒体查询。我的目标是现在为map $ font-types中的每种字体类型自动创建一个类，其中包含嵌套映射中定义的设置。我怎样才能做到这一点？

这是我目前的Sass文件： http://sassmeister.com/gist/d57a840259a9a01bf895

Answer 1

以下是解决方案： http://sassmeister.com/gist/cc95352f47cbaff9975b

$stylethemes: (
    lead-1: (
    font-family: Arial,
    font-size: 30px, 
    font-size-md: 20px, 
    font-size-sm: 12px,
    ),
    lead-2: (
    font-family: Arial,
    font-size: 18px, 
    font-size-sm: 10px
    ),
);


@each $theme, $properties in $stylethemes {
  .#{$theme} {
    @each $prop, $val in $properties {

      @if $prop == font-family  {
        #{$prop}: $val;
      }
      @if $prop == font-size  {
        #{$prop}: $val;
      }
      @if $prop == font-size-md  {
        @include size-m {
          font-size: $val;
        }
      }
      @if $prop == font-size-sm  {
        @include size-s {
          font-size: $val;
        }
      }
    }
  }
}

这样，您可以扩展“样式主题”并使用@includ为特定断点添加其他字体大小。

如何从嵌套映射生成类

1 个答案: