CODEWITHSUNDEEP
sass
nonano
nonano

Reputation: 31

aggregation of selectors created by mixin possible?

I try to get a mixin "remebering" the selectors it was generating so I can make a bulk-selector at the end.

To illustrate what I am trying to do – My mixin looks like so:

@mixin fontcustom($name) {
  @if $name == "heart" {
    $glyph: '\2764'; // a special character in my own font -> ❤
  }
  @else if $name == "foo" { ... }
  @else if $name == "bar" { ... }
  @else if $name == "baz" { ... }
  // ... much much more characters ...

  &:before {
    content:"#{$glyph}";
  }

  /* aggreagation of selectors ? */
}

@function selectorsUsingFontcustom() {
  /* this should somehow result in a list of selectors, see above */
  font-family: fontcustom;
  color: red;
  /* ... */
}

Obviously there are some more style declarations needed, for example font-family, colors and so on.

I want to avoid repetive declarations so my question is: is there a way to make the mixin "remember" the selectors which resulted in applying it and genarate a comma-separated list of them, which results in something like the following?

SCSS:

#my-fancy-selector [data-is-liked] {
  @include fontcustom("heart");
}
.another>.fancy+.foo-selector {
  @include fontcustom("foo");
}

.another>.fancy+.baz-selector {
  @include fontcustom("baz");
}

/* no clue about the following: */
selectorsUsingFontcustom();

CSS:

#my-fancy-selector [data-is-liked]:before {
  content:"\2764";
}

.another>.fancy+.foo-selector:before {
  content:"\2765";
}

.another>.fancy+.baz-selector:before {
  content:"\2767";
}

/* selectorsUsingFontcustom() should return sth like the following then: */
#my-fancy-selector [data-is-liked]:before,
.another>.fancy+.foo-selector:before,
.another>.fancy+.baz-selector:before {
  font-family: fontcustom;
  color: red;
  /* ... */
}

Any ideas?

Upvotes: 0

Views: 145

Answers (1)

bookcasey
bookcasey

Reputation: 40463

Use @extend with placeholder selectors like this:

%heart {
  color: red;
}

h1 {
  @extend %heart;
  font-size: 3em;
}

h2 {
  @extend %heart;
  font-size: 2em;
}

li {
  @extend %heart;
  text-decoration: strikethrough;
}

Output:

h1, h2, li {
  color: red;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

li {
  text-decoration: strikethrough;
}

Upvotes: 1

Related Questions