YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to uninstall Cocoapods from the Mac OS?MiscHow to create a link tag button using CSS?CSSperspective property in CSSCSSHow to replace HTML lists using CSS Counters?CSSJavaScript Data Types and Data Structures Things to RememberJavaScriptWordPress: How to print ACF repeater field values?WordPressThe difference between Class declarations and Class expressions in JavaScriptJavaScriptWhat is the difference between float and double?MiscURL paths in DrupalDrupalWordPress: How to display slider repeater fields in ACF?WordPressThe SQL UNION OperatorSQL/MySQLPagination in CSS with multiple examplesCSS