Как я могу передать тег в качестве аргумента scss mixin? - PullRequest
Новая
       2

Как я могу передать тег в качестве аргумента scss mixin?

0 голосов
/ 19 ноября 2018

Я создаю миксин для целевого дочернего элемента.Пример.Ориентация на все <a> теги родительского элемента, у которого есть родительский элемент section---blue

Я полагаю, что могу передать тег в качестве аргумента следующим образом, но я не получаю желаемый результат

SCSS 

@mixin themeParent ($child) {
    &--blue $child {
        color: getColour("theme", "bluehighlight");
    }

    &--green $child {
        color: getColour("theme", "greenhighlight");
    }

    &--purple $child {
        color: getColour("theme", "purplehighlight");
    }
}

.section {
 @include themeParent(a);
}

Я бы подумал, что это скомпилируется в 

.section--blue a {
color: blue;

}

Может кто-нибудь объяснить мне, почему?

Ответы [ 3 ]

0 голосов
/ 19 ноября 2018

Если я изложу это простым способом, нет необходимости передавать тег в качестве параметра функции mixin, вместо этого вы должны передать цвет элемента. 

<div className="section--blue">
                    <a>section blue</a>
</div>

<div className="section-green">
           <a>section green</a>        
</div>

mixin и css 

@mixin themeParent ($color) {
   color:$color;
 }
.section{
    &--blue {
        a{
            @include themeParent(blue);
        }
    }
    --green{
        a{
            @include themeParent(green);
        }
    }
}

Надеюсь, это полезно.

0 голосов
/ 20 ноября 2018 
@mixin themeParent ($child) {
    &--blue #{$child} {
        color: blue;
    }
}

выходы: .section--blue a { color: blue; }

Если вы хотите большей специфичности, просто добавьте еще &: 

@mixin themeParent ($child) {
    &#{&}--blue #{$child} {
        color: blue;
    }
}

выходы: .section.section--blue a { color: blue; }

Если вы хотите больше масштабируемости, просто итерируйте нужные цвета: 

@mixin themeParent ($child) {
  $colors: red, blue, green;
  @each $color in $colors {
    &#{&}--#{$color} #{$child} {
        color: $color;
    }
  }
}
0 голосов
/ 19 ноября 2018

Положить $child в #{$child}. 

@mixin themeParent ($child) {
    #{$child} {
        color: #000;
    }
}

.section {
    @include themeParent(a)
}

Вывод: 

.section a {
  color: #000;
}
...