Learn Programming with me in 2023 :How to do nesting in SCSS vs CSS

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.