CODEWITHSUNDEEP
csssassscss-mixins
DumbDevGirl42069
DumbDevGirl42069

Reputation: 959

How can I pass a tag in as a scss mixin argument?

I am creating a mixin to target a child element. Example. Targeting all <a> tags of the parent that has a parent of section---blue

I figure that I can pass the tag as an argument as follows But I am not getting the desired result

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);
}

I would have thought that this would compile to

.section--blue a {
color: blue;

}

Can someone please explain to me why?

Upvotes: 2

Views: 1513

Answers (3)

llobet
llobet

Reputation: 2790

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

outputs: .section--blue a { color: blue; }

If you want more specificity, just add another &:

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

outputs: .section.section--blue a { color: blue; }

If you want more scability, just iterate over colors you want:

@mixin themeParent ($child) {
  $colors: red, blue, green;
  @each $color in $colors {
    &#{&}--#{$color} #{$child} {
        color: $color;
    }
  }
}

Upvotes: 3

Learner
Learner

Reputation: 23

If I put this in a simple way, there is no need to pass the tag as a parameter to the mixin function instead, u should pass the color of the element.

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

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

mixin and css

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

Hope this is useful.

Upvotes: 0

Mohi
Mohi

Reputation: 1808

Put $child in #{$child}.

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

.section {
    @include themeParent(a)
}

Output:

.section a {
  color: #000;
}

Upvotes: 2

Related Questions