响应式标题的SASS函数

Question

我正在寻找一种方法来创建一个函数/混入，以便从sass映射生成字体样式，同时也使其具有响应性。我已经设置了2个地图，我正在努力想办法从地图中输出值。

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

我已经设置的地图如下所示：

$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
                ),
        ),
);

Answer 1

Sass以2不同类型的环路为特色。一个是@each循环，另一个是@for循环-你可能已经读过了。

@each，@for

Sass还具有从$map或$list获取value的不同功能。

Map functions、list functions (您还可以在地图上执行列表函数，就像我在下面的示例中所做的那样)。

我做的第一件事是，我缩小了嵌套的$maps，在这种情况下，地图中的重复内容更容易声明为：(如果这是有意的，也可以通过一些小的更改轻松实现)

而不是：

$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
    ),
   
    ...

  ),
);

我这样做了：

$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,
  ),

  ...

);

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

整个代码：

$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;
  }
}