Variables in SASS

Quick answer: Variables in SASS let you store a value once and reuse it everywhere, so colours, font stacks, and spacing stop being repeated through your stylesheet. Declare a name with a dollar sign, assign it a value, then reference it wherever needed. Change the value once and every reference updates automatically.

What are variables in SASS and Learn Variables in SASS

Sass variables are basic: you relegate a value to a name that starts with $, and afterwards, you can allude to that name rather than the actual worth. In any case, notwithstanding their straightforwardness, they’re perhaps the most valuable tool Sass brings to the table. Variables make it conceivable to lessen redundancy, do complex math, arrange libraries, and considerably more.

A variable affirmation looks a great deal like a property assertion: it’s composed <variable>: <expression>. In contrast to a property, which must be pronounced in a style rule or at-rule, variables can be proclaimed anyplace you need. To utilize a variable, simply remember it for worth.

CSS also has its variables, and CSS variables are compatible with almost 90% of the available browsers. Following is CSS variable syntax.

:root{
	--blue:#1e90ff;
}

To call the variable syntax in CSS is as follows.

p{
	background-color: var(--blue);
}

SASS variables are easy to implement. The SASS variable starts with $ and its easy to call the variable by prefixing the $ just before the variable name. Both SASS and SCSS variables begin with $. By implementing the following code, you’ll learn variables in SASS.

SASS Variable Syntax

$primary-color: #d2d2d2
p
	color: $primary-color

SCSS Variable Syntax

$primary-color: #d2d2d2;
p{
	color:$primary-color;
}

CSS Output

p{
	color: #d2d2d2
}

CSS Variables vs. SASS Variables

CSS has variables of its own, which are entirely different from Sass variables. Know the distinctions! Sass variables are completely gathered away by Sass. CSS variables are remembered for the CSS yield. CSS variables can have various qualities for various components, however, Sass variables just have each worth in turn. Sass variables are basic, which implies assuming you utilize a variable and, change its worth, the previous use will remain something very similar. CSS variables are explanatory, which implies in the event that you change the worth, it’ll influence both prior utilizes and later employments.

In the next tutorial, we will be learning Nesting and Interpolation in SASS.

Frequently asked questions