Yogesh Chauhan's Blog

How to define variables in SCSS (Sass)?

in SCSS on May 7, 2021

Sass or SCSS variables are similar to PHP variables in one way. Just assign a value to a variable name that starts with a dollar sign ($).

Just like this:

$base-color: #c6538c;

Sass (SCSS) Variables are really helpful in reducing repetition and even complex math calculation.

Sass doesn’t differentiate between hyphens and underscores when it comes to variable names. So, $font-size and $font_size both are like calling the same variable.

The SCSS code above for ‘alert‘ class compiles into this CSS:

.alert {
  border: 1px solid rgba(255, 76, 76, 0.88);
  color: #ff4c4c;

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
How to add a ribbon inside a container using CSS?CSSHow to convert an object from API to JSON array in Angular 9?AngularHow to set up the local environment and workspace for Angular development?AngularHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPHow to create a placeholder loader (throbber) using CSS?CSSIntroduction to components and templates Part 1: Component MetadataAngularThe order Property in Flex Items in CSSCSSWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryHow to draw an SVG path on scroll using JavaScript?JavaScriptAccessing and Setting features of JavaScript ObjectsJavaScriptCreate a galley with overlapping images using CSS gridCSS10 Usability Blunders to AvoidUI/UX