在 Foundation 框架的 sass 设置中添加字母间距（6）？

Question

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

如何将字母间距添加到我的全局样式中 (

_settings.scss

)？

（下面的

$header-styles map

复制/粘贴定义为 Foundation 的 npm 节点模块中的

_base.scss

）

Answer 1

您可以通过使用原始基础循环创建标题样式来实现此目的：

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

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

ls

。

然后在您的

$header-styles map

中使用它：

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