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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Gap in Flex?CSSWhat is XP (Extreme Programming) and When should it be used?MiscellaneousHow to create a simple tab interaction using CSS?CSSWhat are Identifiers in JavaScript?JavaScriptIs Software Really Eating The World? I don’t think soMiscellaneousHow to create a simple drop down menu using JavaScript and CSS?CSSHow to remove N/A from Radio Button list in Drupal?DrupalFlash of Invisible Text and Mitt Romney Web Font ProblemCSSFunction Scope in JavaScript for BeginnersJavaScriptWhere is the PHP log file located on Mac OS?PHPWordPress: How to display fields from ACF Flexible Contents?WordPressKilling A Project Part 2: Who should make the decision to kill a project?Miscellaneous