Передача переменных из одного миксина в другой при вызове внутри - PullRequest
Новая
       19

Передача переменных из одного миксина в другой при вызове внутри

0 голосов
/ 21 апреля 2019

Я работаю над Sass-фреймворком, чтобы практиковать свои навыки, расширять свои знания и иметь что-то, что я построил для себя в своих будущих проектах. Текущая фаза структуры представляет собой простую модульную шкалу для типографики. Я пытаюсь сохранить его СУХИМ, но также гибким, поэтому я создал отдельный миксин для font-size и line-height. Однако в этих миксинах используются одни и те же переменные, основанные на функции map-deep-get. Итак, я создал третий миксин под названием font-vars для хранения всех этих переменных и вызова микшинов font-size и line-height.

Все они основаны на точках останова на картах, поэтому их использование в качестве глобальных переменных не имеет смысла. При определении переменных в миксинах font-size и line-height все работает как положено, но когда они хранятся в отдельном миксине, они не передаются тем, в которые вызывается 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, передавались в font-size и line-height при вызове mixin внутри них, но это работает, только когда я определяю их в каждом mixin.

1 Ответ

1 голос
/ 22 апреля 2019

Вы можете использовать @function, который возвращает карту переменных, вместо 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)
...