Yogesh Chauhan's Blog

Default Values in SCSS (Sass)

in SCSS on May 9, 2021

When you define a variable in SCSS (Sass) and change the value of it, the value gets overwritten.

If you want to set the variables value dynamically using an user input, there is a way.

You can use !default flag to do so.

The !default flag only assigns a value to a variable if the variable is not defined or the value for the variable is null.

It is basically like adding an if-else statement but in a really short and quick way.

You can configure variables with !default flag when you load a module using @use rule.

To do so, write @use with (: , : ). The new values in configuration will override the default values.

You need to write those variables with !default tag at the top of the stylesheet. Only those variables will be configured.

Example


// _alert.scss
$border-radius: 10px !default;

.alert {
  border-radius: $border-radius;
}


// style.scss
@use 'alert' with (
  $border-radius: 15px
);

Compiled CSS


.alert {
  border-radius: 15px;
}


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 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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
What happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousCreate a currency (dollar) to coins convertor in ReactReactHow to install Gulp with WordPress?WordPressThe unique operator($) in Envision BasicEnvision BasicHow to create a flip pricing table using CSS and JavaScript?CSSHow to check if the page is single post page in WordPress?WordPressExplanation of PostgreSQL PgAdmin interfacePostgresFive common features of Angular template syntax (with examples)AngularUse inline if to make a shorter conditional syntax in ReactReactCan we execute conditions in SQL?SQL/MySQLHow different is Handling Events in React vs HTML DOM?ReactHow to change the style for checked radio button or checkboxes using CSS?CSS