时间戳

首页 > 解决方案 > 在内部调用时将变量从一个 mixin 传递到另一个 mixin

variables - 在内部调用时将变量从一个 mixin 传递到另一个 mixin

问题描述

我正在开发一个 Sass 框架来练习我的技能，扩展我的知识，并拥有我自己构建的东西以在我未来的项目中使用。该框架的当前阶段是用于排版的简单模块化规模。我试图让它保持干燥，但也很灵活，所以我为字体大小和行高创建了一个单独的 mixin。但是，这些 mixin 使用基于 map-deep-get 函数的相同变量。所以我创建了第三个名为 font-vars 的 mixin 来保存所有这些变量并调用 font-size 和 line-height mixin。

它们都基于地图中的断点，因此将它们用作全局变量是没有意义的。在 font-size 和 line-height mixin 中定义变量时，一切都按预期工作，但是当保存在单独的 mixin 中时，它们不会被传递给正在调用的 font-vars。

=font-vars($element, $size: null)
  $element-exponent: map-deep-get($typography, font-sizing, $element)
  $base-fs: map-deep-get($base, sizes, $size, font-size)
  $base-lh: map-deep-get($base, sizes, $size, line-height)
  $scale: map-deep-get($base, sizes, $size, scale)
  $fs: pow($scale, $element-exponent) * 1em
  $lh: $base-fs * $base-lh / $fs

=font-size($element, $size: null)
  +font-vars($element, $size)
  @if map-deep-get($base, sizes, type-breakpoint) != false
    font-size: $fs

=line-height($element, $size: null)
  +font-vars($element, $size)
  @while $lh < 1
    $lh: $lh + $lh

  $lh: $lh * 1em

  @if map-deep-get($base, sizes, type-breakpoint) != false
    line-height: $lh

p
  +font-size(p)
  +line-height(p)

TL; DR：我希望在 font-vars 中保存的变量在其中调用 mixin 时传递给 font-size 和 line-height，但它仅在我在每个 mixin 中定义它们时才有效。

标签： variablessassmixins

解决方案

您可以使用@function返回变量映射的 a 而不是 a mixin。例如：

@function get-colors()
  @return (red: #ff0000, blue: #0000ff)

=colors
  $colors: get-colors()
  color: map-get($colors, red)

p
  +colors

将返回：

p { color: #ff0000; }

因此，在您的情况下，您function将是：

@function get-font-vars($element, $size: null)
  @return (
    element-exponent: map-deep-get($typography, font-sizing, $element),
    base-fs: map-deep-get($base, sizes, $size, font-size),
    base-lh: map-deep-get($base, sizes, $size, line-height),
    scale: map-deep-get($base, sizes, $size, scale),
    fs: pow($scale, $element-exponent) * 1em,
    lh: $base-fs * $base-lh / $fs
  )

然后你可以打电话给：

$font-vars: get-font-vars($element, $size)

推荐阅读