Variables 在内部调用时,将变量从一个mixin传递到另一个mixin
我正在开发一个Sass框架,以实践我的技能,扩展我的知识,并在我未来的项目中使用我自己构建的东西。框架的当前阶段是一个简单的排版模块。我试图保持它干燥,但也灵活,所以我创建了一个单独的混合字体大小和行高。但是,这些mixin基于map deep get函数使用相同的变量。所以我创建了第三个mixin,名为font-vars,用于保存所有这些变量,并调用字体大小和行高mixin 它们都基于映射中的断点,因此将它们用作全局变量是没有意义的。当在字体大小和行高混合中定义变量时,一切都按预期工作,但当在单独的混合中保存时,它们不会传递给正在调用字体变量的对象Variables 在内部调用时,将变量从一个mixin传递到另一个mixin,variables,sass,mixins,Variables,Sass,Mixins,我正在开发一个Sass框架,以实践我的技能,扩展我的知识,并在我未来的项目中使用我自己构建的东西。框架的当前阶段是一个简单的排版模块。我试图保持它干燥,但也灵活,所以我创建了一个单独的混合字体大小和行高。但是,这些mixin基于map deep get函数使用相同的变量。所以我创建了第三个mixin,名为font-vars,用于保存所有这些变量,并调用字体大小和行高mixin 它们都基于映射中的断点,因此将它们用作全局变量是没有意义的。当在字体大小和行高混合中定义变量时,一切都按预期工作,但当在
=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:我希望字体变量中的变量在内部调用mixin时传递到字体大小和行高,但只有在每个mixin中定义它们时,它才起作用。您可以使用@函数返回变量的映射,而不是mixin。例如:
@function get-colors()
@return (red: #ff0000, blue: #0000ff)
=colors
$colors: get-colors()
color: map-get($colors, red)
p
+colors
将返回:
p { color: #ff0000; }
因此,在您的情况下,您的功能将是:
然后您可以通过以下方式调用:
$font-vars: get-font-vars($element, $size)
这几乎奏效了,但肯定把我引向了正确的方向。由于其中一些变量引用其他变量,我必须在函数中声明它们,然后返回变量元素指数的映射:$element index等,然后使用$font vars命名映射,然后使用map get调用每个变量。但它确实让代码干涸了一点。谢谢您:
$font-vars: get-font-vars($element, $size)