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

问题描述

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

如何在我的全局样式（_settings.scss）中添加字母间距？

（（从Foundation的npm节点模块将$header-styles map复制/粘贴定义为_base.scss）

解决方法

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

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