Доступ к переменным Sass в директиве @content - PullRequest
Новая
       41

Доступ к переменным Sass в директиве @content

0 голосов
/ 12 июля 2020

Я создаю Sass @mixin для поддержки тематики. В настоящее время у меня есть два действующих решения, с которыми я мог бы работать: 

$dark: (
  bg-1: '#000',
  tint-1: '#fff'
)

$light: (
  bg-1: '#fff',
  tint-1: '#000'
);

$themes: (
  $dark: 'dark',
  $light: 'light'
);

// Mixin 1 declaration
@mixin theme($declarations...) {
  @each $theme, $name in $themes {
    @at-root .#{$name} & {
      @each $property, $value in $declarations {
        #{$property}: map-get($theme, $value);
      }
    }
  }
}

// Mixin 1 usage
.foo {
  @include theme(
    (background, bg-1),
    (color, tint-1)
  );
}

// Mixin 1 output
.dark .foo {
  background: #000;
  color: #fff;
}
.light .foo {
  background: #fff;
  color: #000;
}

// Mixin 2 declaration
@mixin theme($declarations...) {
  @each $theme, $name in $themes {
    @at-root .#{$name} & {
      @each $declaration in $declarations {
        #{nth($declaration, 1)}: map-get($theme, #{nth($declaration, 2)});
      }
    }
  }
}

// Mixin 2 usage
.foo {
  @include theme(
    background bg-1,
    color tint-1
  );
}

// Mixin 2 output
.dark .foo {
  background: #000;
  color: #fff;
}
.light .foo {
  background: #fff;
  color: #000;
}

Ключевым отличием является различие в использовании с различным использованием скобок и разделителей списков. Я хотел бы знать, можно ли получить доступ и изменить переменные в директиве @content. Чтобы я мог использовать свой @mixin следующим образом и добиться исходного результата: 

// Ideal mixin usage
.foo {
  @include theme {
    background: $bg-1;
    color: $tint-1;
  };
}

Если это возможно, предполагается, что я передал бы переменную, объявленную в значении свойства каждого объявления, как аргумент map-get(), чтобы соответствующим образом контекстуализировать.

Заранее спасибо.

...