响应标题的SASS功能

我正在寻找一种方法来创建一个函数/mixin，以从sass映射生成字体样式，同时使其具有响应性。我有两个地图设置，我正在努力找出一种方法来输出地图的值

第一个映射是断点，我已经在需要的地方构建了这些断点。第二个是一个映射，它保存了h1、h2、h3等的所有scss值，我想要它，这样我就可以将mixin包含到一个文件中，它将根据映射创建所需的所有样式

我已经设置的地图如下：

$breakpoints: (
        small: 0,
        medium: 640px,
        large: 1024px,
        xlarge: 1200px,
        xxlarge: 1440px,
);

$heading-styles: (
        small: (
                'h1': (
                        font-size: 24,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h2': (
                        font-size: 20,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h3': (
                        font-size: 19,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h4': (
                        font-size: 18,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h5': (
                        font-size: 20,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h6': (
                        font-size: 20,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
        ), medium: (
                'h1': (
                        font-size: 48,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h2': (
                        font-size: 40,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h3': (
                        font-size: 31,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h4': (
                        font-size: 25,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h5': (
                        font-size: 20,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h6': (
                        font-size: 16,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
        ), large: (
                'h1': (
                        font-size: 60,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h2': (
                        font-size: 50,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h3': (
                        font-size: 41,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h4': (
                        font-size: 35,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h5': (
                        font-size: 24,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
                'h6': (
                        font-size: 16,
                        line-height: 1.6,
                        margin: 0 0 0.9375rem 0,
                        letter-spacing: 0
                ),
        ),
);

---

Sass具有不同类型的环路。一个是

@each

循环，另一个是

@for

循环-您可以读懂它

,

---

Sass还具有不同的功能，可以从

$map

或

$list

获取

值

，（您也可以在地图上执行列表函数，正如我在下面的示例中所做的那样）


我做的第一件事是，我缩小了嵌套的
$maps
，在这种情况下，地图中的代表性内容更容易像这样声明：（如果这是有意的，也可以通过做一些小更改轻松实现）

而不是：

我这样做：


整个代码：

$breakpoints: (
  "sm":   0,
  "md":   640,
  "lg":   1024,
  "xl":   1200,
  "xxl":  1440,
);

$headings: (
  "sm": (
    "h1": 24,
    "h2": 20,
    "h3": 19,
    "h4": 18,
    "h5": 20,
    "h6": 20,
  ),
  "md": (
    "h1": 48,
    "h2": 40,
    "h3": 31,
    "h4": 25,
    "h5": 20,
    "h6": 16,
  ),
  "lg": (
    "h1": 60,
    "h2": 50,
    "h3": 41,
    "h4": 35,
    "h5": 24,
    "h6": 16,
  ),
);

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .9375rem;
  line-height: 1.6;
  letter-spacing: 0
}

// loop through "$breakpoints"
@for $i from 1 through length($breakpoints) {
  
  // loop through breakpoints inside "$headings" ["sm", "md" ...]
  @for $j from 1 through length($headings) {
    
    // "@if" headings and breakpoint matches... [sm == sm, md == md ...]
    @if nth(nth($headings, $j), 1) == nth(nth($breakpoints, $i), 1) {
      
      // create "@media querie"
      @media (min-width: #{nth(nth($breakpoints, $i), 2)}px) {
        
        // loop through headings inside "$headings" ["h1", "h2" ...]
        @for $k from 1 through length(nth(nth($headings, $j), 2)) {
          
          // generate CSS class
          #{nth(nth(nth(nth($headings, $j), 2), $k), 1)} {
            font-size: #{nth(nth(nth(nth($headings, $j), 2), $k), 2)}px;
          }
        }
      }
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .9375rem;
  line-height: 1.6;
  letter-spacing: 0;
}

@media (min-width: 0px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 19px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 20px;
  }
}
@media (min-width: 640px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 31px;
  }

  h4 {
    font-size: 25px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 60px;
  }

  h2 {
    font-size: 50px;
  }

  h3 {
    font-size: 41px;
  }

  h4 {
    font-size: 35px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 16px;
  }
}


返回：

$breakpoints: (
  "sm":   0,
  "md":   640,
  "lg":   1024,
  "xl":   1200,
  "xxl":  1440,
);

$headings: (
  "sm": (
    "h1": 24,
    "h2": 20,
    "h3": 19,
    "h4": 18,
    "h5": 20,
    "h6": 20,
  ),
  "md": (
    "h1": 48,
    "h2": 40,
    "h3": 31,
    "h4": 25,
    "h5": 20,
    "h6": 16,
  ),
  "lg": (
    "h1": 60,
    "h2": 50,
    "h3": 41,
    "h4": 35,
    "h5": 24,
    "h6": 16,
  ),
);

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .9375rem;
  line-height: 1.6;
  letter-spacing: 0
}

// loop through "$breakpoints"
@for $i from 1 through length($breakpoints) {
  
  // loop through breakpoints inside "$headings" ["sm", "md" ...]
  @for $j from 1 through length($headings) {
    
    // "@if" headings and breakpoint matches... [sm == sm, md == md ...]
    @if nth(nth($headings, $j), 1) == nth(nth($breakpoints, $i), 1) {
      
      // create "@media querie"
      @media (min-width: #{nth(nth($breakpoints, $i), 2)}px) {
        
        // loop through headings inside "$headings" ["h1", "h2" ...]
        @for $k from 1 through length(nth(nth($headings, $j), 2)) {
          
          // generate CSS class
          #{nth(nth(nth(nth($headings, $j), 2), $k), 1)} {
            font-size: #{nth(nth(nth(nth($headings, $j), 2), $k), 2)}px;
          }
        }
      }
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .9375rem;
  line-height: 1.6;
  letter-spacing: 0;
}

@media (min-width: 0px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 19px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 20px;
  }
}
@media (min-width: 640px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 31px;
  }

  h4 {
    font-size: 25px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 60px;
  }

  h2 {
    font-size: 50px;
  }

  h3 {
    font-size: 41px;
  }

  h4 {
    font-size: 35px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 16px;
  }
}