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

Utilizing PHP to create an interactive website

The highlight_row function seems to be delayed, as it does not trigger on the initial onClick but works on subsequent clicks. How can I ensure it works properly right from the first click?

Numerous sections with tabs on the webpage

Implementing specific CSS styles for images that exceed a certain size limit

Display PHP output within a styled CSS box

Image background is not showing up in the input field

Include an additional phase within the MUI stepper and customize the styling

HTML5 header video with a subtle color palette

Tips for creating gaps between wells within a Bootstrap row

Comparing CSS rules: the faster option between specifying multiple IDs or not

Implementing CSS loading in Vue 3's shadow DOM for nested components

Responsive navigation menus can create confusion when hover and click events overlap

Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

Should the element be scrolled beyond a fixed-positioned element

How to dynamically display a div in Vue.js depending on the attributes of another element

Is Flash now irrelevant? What makes HTML5 or CSS3 so powerful?

Tips on aligning a span element at the center of an image without losing its mouseover

Centered buttons placed right next to each other

Adjust the color of a div's background when clicked by solely using CSS

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar