在基础框架的SASS设置中添加字母间距（6）？

如何将字母间距添加到全局样式（

\u settings.scss

）中

---

<>（<代码> $标题样式图< /COD>复制/粘贴贝娄被定义为Base.ScSS从基础的NPM节点模块）

你可以通过使用原始的基础循环来创建这样的标题样式：

$header-styles: (
  'small': (
    'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h2': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h3': ('fs': 19, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h4': ('fs': 18, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h5': ('fs': 17, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h6': ('fs': 16, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom)
  ),
  'medium': (
    'h1': ('fs': 48, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h2': ('fs': 40, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h3': ('fs': 31, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h4': ('fs': 25, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h5': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h6': ('fs': 16, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom)
  ),
  ...
)

请注意，我添加了缩写形式

ls

然后在

$标题样式映射中使用它：

// Adding letter spacing to Heading styles Foundation loop
@each $size, $headers in $header-styles {
  @include breakpoint($size) {
    @each $header, $header-defs in $headers {
      $letter-spacing-temp: 0rem; // setting your default letter-spacing here
      #{$header}, .#{$header} {
        @if map-has-key($header-defs, letter-spacing) {
          $letter-spacing-temp: rem-calc(map-get($header-defs, letter-spacing));
          letter-spacing: $letter-spacing-temp;
        } @else if map-has-key($header-defs, ls) {
          $letter-spacing-temp: rem-calc(map-get($header-defs, ls));
          letter-spacing: $letter-spacing-temp;
        } @else if $size == $-zf-zero-breakpoint {
          letter-spacing: $letter-spacing-temp;
        }
      }
    }
  }
}

$header-styles: (
  small: (
    'h1': ('fs': 24),
    'h2': ('fs': 20),
    'h3': ('fs': 19),
    'h4': ('fs': 18),
    'h5': ('fs': 17),
    'h6': ('fs': 16),
  ),
  large: (
    'h1': ('fs': 80, 'letter-spacing' : -2.4),
    'h2': ('fs': 40, 'ls' : -1),
    'h3': ('fs': 31),
    'h4': ('fs': 25),
    'h5': ('fs': 20),
    'h6': ('fs': 16),
  ),
);