Is there a way to include a tag as an argument in a scss mixin?

Question

Is there a way to include a tag as an argument in a scss mixin?

Currently, I am working on a mixin that will target a specific child element within a parent. For instance, my goal is to target all <a> tags within a parent element that also has a parent of section---blue.

I initially thought that passing the tag as an argument would work, but unfortunately, I haven't achieved the desired outcome.

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

My expectation was that this code snippet would compile to:

.section--blue a {
color: blue;

}

If anyone can help me understand why it does not work as expected, I would greatly appreciate it.

css sass scss-mixins

Answer 1

Answer №1

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

resulting in:

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

If you need more specificity, just include another &:

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

resulting in:

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

If you want greater scalability, iterate through the desired colors:

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

Answer 2

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

resulting in:

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

If you need more specificity, just include another &:

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

resulting in:

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

If you want greater scalability, iterate through the desired colors:

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

Answer 3

Answer №2

Insert $child into #{$child}.

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

.section {
    @include themeParent(a)
}

Result:

.section a {
  color: #000;
}

Answer 4

Insert $child into #{$child}.

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

.section {
    @include themeParent(a)
}

Result:

.section a {
  color: #000;
}

Answer 5

Answer №3

Simply put, there is no need to include the tag as a parameter in the mixin function. Instead, pass the color of the element.

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

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

Mixins and CSS

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

I hope you find this information helpful.

Answer 6

Simply put, there is no need to include the tag as a parameter in the mixin function. Instead, pass the color of the element.

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

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

Mixins and CSS

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

I hope you find this information helpful.

Is there a way to include a tag as an argument in a scss mixin?

Answer №1

Answer №2

Answer №3

Similar questions

Looping through required fields in jQuery based on a CSS class

What is the method for retrieving the active element with Waypoint?

Ways to create a border button with a matching width to the text above using CSS

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

employing the display flex property triggers the emergence of a lavender border

Reinitializing AngularJS form controls

In which location are HTML files stored within WordPress plugins?

Aligning a div vertically in the center of its parent container

What is the best way to set up the correct pathway for displaying the image?

Invert the motion within a photo carousel

I'm having trouble adjusting the link color in my footer text while navigating Wordpress for the first time

The navigation bar vanishes from sight while scrolling underneath other sections

What is the method for ensuring the banner image is visible behind the transparent navigation bar?

Memory Match: Picture Edition

What are the best methods for detecting devices in order to create customized CSS styles for iPad and Galaxy Tab?

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

Display fixed or absolute elements within a scrollable container

Ways to style text using variables in SASS without using quotation marks

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?