Yogesh Chauhan's Blog

Check if mixin is being called in a style rule or not in SCSS

in SCSS on April 26, 2021

We can use the parent selector to do that.

The parent selector (&) will return null if we use it outside of any style rules. The null is nothing but a false or a falsey. We can check that using SCSS if statement and check if mixin is being called in a style rule or not.

Here’s how to do that:

Let’s understand what happens in the example above.

We know how @mixin and @include with parameters work.

@mixin is a wonderful rule SassScript has. It allows you to write style rules that can be used throughout your stylesheet — basically it helps to create reusable styles.

Everything work the same way — passing an argument and applying the style. The only difference is that the if statement checks if there is a parent selector or not. It returns one of the two classes based on that check.

The SCSS code above compiled into this CSS code:


.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Did you get an error while displaying Special Characters in JavaScript?JavaScriptHow to Access a Global Variable From Inside a Function in PHP?PHPHow to replace HTML lists using CSS Counters?CSSOpen Source Security Tools for Defense SecurityMiscellaneousHow to Write Complex Search Queries in SQL?SQL/MySQLEssential SQL Commands We Need to KnowSQL/MySQLLearn how to add Scroll Indicator using CSS and JavaScript?CSSHow to show and hide an element on click in React?ReactSELF JOIN in PostgresPostgresCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPHow to create a Progress Bar using JavaScript?JavaScriptHow does while loop work in SCSS?SCSS