
Introduction
This post will show you how to nest in CSS as well as in SASS, using the SCSS syntax.
Examples
HTML Code
<div class="box">
<span class="text">
HELLO I AM LEARNING <span>SASS</span>
</span>
</div>
<div class="box red">
<span class="text">
HELLO I AM LEARNING <span>SASS</span>
</span>
</div>
CSS Solution
:root{
--bg-color:blue;
--red-bg-color:red;
--font-size:14px;
--font-color:white;
}
.box {
width: 200px;
height: 200px;
background: var(--bg-color);
display:flex;justify-content:center;
align-items:center;
}
.red{
background: var(--red-bg-color);
}
.text {
font-size: var(--font-size);
padding:10px;
text-align:center;
color:var(--font-color)
}
.red .text {
color:black;
}
.red .text span{
font-weight:600;
color:var(--font-color);
}
SCSS Solution
See the Pen
Untitled by Comfort (@ajalacomfort16)
on CodePen.
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.