Introduction

This post will show you how to set variables in CSS as well as in SASS, using the SCSS syntax.

Examples

HTML Code

<div class="box">
<span class="text">HELLO I AM LEARNING SASS</span>
</div>

CSS Solution

.box {
--bg-color: blue;
--font-size: 14px;
width: 200px;
height: 200px;
background: var(--bg-color);
}
.text {
font-size: var(--font-size);
}

SCSS Solution

$bg-color : blue;
$font-size:14px;

.box {
width: 200px;
height: 200px;
background: $bg-color;
}
.text {
font-size: $font-size;
}

Editor’s notes

I noticed in CSS that when the variables are created outside the scope of the element that uses it, nothing works. So make sure to set them either in some parent element or within the element itself, just like in this example.

References

Sass Guide

These might interest you:
%d bloggers like this: