YogeshChauhan . com

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

12 URLSearchParams methods in JavaScriptJavaScriptWhy does MOV matter in IT or any kind of projects?MiscHow to add a Bar Chart in Angular App?AngularHow to Hide HTML elements automatically after few seconds using JavaScript?HTMLHow to add Read More Read Less Button using JavaScript?JavaScriptIntroduction to components and templates Part 2: Templates and viewsAngularHow to swap images on hover using CSS?CSSHow to detect if browser supports WebP format on server side PHP script?PHPHow to get recent posts in WordPress?WordPressColumn and Table Alias in PostgresPostgresHow to zoom an element on hover using CSS?CSSQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScript