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

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

CSS font attribute stylus variable

Create a layout using jquery-tokeninput

The various options in the dropdown menu are descending in order

Scroll to a new section of the page if the specified id or name cannot be found

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

What is the best way to find an element using either 'className1' or 'className2'?

Stop right-floating elements from switching positions

Tips for avoiding word fragmentation in <pre> code blocks

What is the best way to create a continuous loop of images on a never-ending

transitioning backwards upon the removal and addition of classes in vue

Dynamically obtaining the screen width in JSP using a variable

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

Show a pop-up form when a user focuses on it using React

When a div with a height of 100% exceeds its parent container, it spills over to the flexbox

Experiencing difficulty aligning the Material UI grid to float on the right side

Tips for resolving a sluggish webpage with database content

Achieving successful functionality with position:relative in IE9

Alert users before visiting external websites

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another