SASS: Is there a way to add an optional selector?

Question

my idea is to add optionally a CSS-Selector to already existing selector stack inside a mixin.

My wish

@mixin myMixin(mobileSelector:true) {
  @if(mobileSelector) {
    .foo .mobile:before,
  }
  .classXY .subclass:before{
    color: red;
  }
}

.awesomeClass-A {
  @include myMixin();
}

@media (min-width: 1025px){
  .awesomeClass-B {
    @include myMixin(false);
  }
}

Should compile to:

 
.awesomeClass-A .foo .mobile:before,
.awesomeClass-A .classXY .subclass:before {
    color: red;
}

@media (min-width: 1025px) {
  .awesomeClass-B .classXY .subclass:before {
    color: red;
  }
}

How to get this work? :)

What is `subclass`? It doesn't seem to be a valid selector. – Arkellys Mar 05 '21 at 12:09 — Arkellys, Mar 05 '21 at 12:09
Correct. Should be ```.subclass``` ;) – TylerD Mar 08 '21 at 09:52 — TylerD, Mar 08 '21 at 09:52

score 1 · Answer 1 · answered Mar 05 '21 at 12:30

1

Just call variables with $ before and add whole class to @if condition:


@mixin myMixin($mobileSelector: true) {
  @if ($mobileSelector) {
    .foo .mobile:before,
    .classXY subclass:before {
      color: red;
    }
  } @else {
    .classXY subclass:before {
      color: red;
    }
  }
}

.awesomeClass-A {
  @include myMixin();
}

@media (min-width: 1025px) {
  .awesomeClass-B {
    @include myMixin(false);
  }
}

answered Mar 05 '21 at 12:30

Brebber

2,986
2
9
19

Right, this will work, but I wanted to avoid redundant code parts. – TylerD Mar 08 '21 at 09:51

score 1 · Accepted Answer · answered Mar 06 '21 at 21:51

1

You could use a variable and interpolation syntax:

@mixin myMixin($mobileSelector: true) {
  $mobile: if($mobileSelector, ".foo .mobile:before,","");
  #{$mobile} .classXY .subclass:before{
    color: red;
  }
}

.awesomeClass-A {
  @include myMixin();
}

@media (min-width: 1025px){
  .awesomeClass-B {
    @include myMixin(false);
  }
}

answered Mar 06 '21 at 21:51

ReSedano

4,970
2
18
31

1

Yeah, the if-Function in the second line is what I was searching for. :D Great! Thanks you! – TylerD Mar 08 '21 at 09:56

SASS: Is there a way to add an optional selector?

2 Answers2