Can you include an optional selector in SASS?

Question

Can you include an optional selector in SASS?

Here is an interesting concept: adding a CSS-selector optionally to the existing selector stack within a mixin.

This is what I envision:

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

Desired compilation result:

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

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

Any ideas on making this happen? :)

css sass dart-sass

Answer 1

Answer №1

To simplify your code, you can utilize a variable and interpolation syntax like this:

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

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

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

Answer 2

To simplify your code, you can utilize a variable and interpolation syntax like this:

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

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

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

Answer 3

Answer №2

To incorporate variables, remember to prefix them with $ and include the entire class in the @if statement:


@mixin myMixin($mobileSelector: true) {
  @if ($mobileSelector) {
    .example-class .mobile:before,
    .anotherClass sub-class:before {
      color: red;
    }
  } @else {
    .anotherClass sub-class:before {
      color: red;
    }
  }
}

.incredible-Class-A {
  @include myMixin();
}

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

Answer 4

To incorporate variables, remember to prefix them with $ and include the entire class in the @if statement:


@mixin myMixin($mobileSelector: true) {
  @if ($mobileSelector) {
    .example-class .mobile:before,
    .anotherClass sub-class:before {
      color: red;
    }
  } @else {
    .anotherClass sub-class:before {
      color: red;
    }
  }
}

.incredible-Class-A {
  @include myMixin();
}

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

Can you include an optional selector in SASS?

Answer №1

Answer №2

Similar questions

When using Javascript's querySelector, often times it returns null

What caused the mat-date calendar style to malfunction?

Using JavaScript, create a set of buttons within a div element and implement

Error encountered in the VS Task Runner Explorer: Node Sass failed to locate a binding

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

I am experiencing difficulties updating my website

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

Reducing the Bootstrap Navbar Collapse Width

Is there a way to create automatic line breaks in this text?

Having trouble with a basic select tag and options not functioning properly in Chrome browser

Avoid prolonging lines in React Styled Components

Learning to use Material-UI: Wrapping a list into columns

What is the method for customizing the background color in a .vue file using Bootstrap?

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

What is preventing me from adjusting the padding of the mat-button?

Arranging unrelated divs in alignment

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Showing nested div elements in a single row

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box