Learn Programming with me in 2023 : How to share styles across selectors using SCSS (@extend )

Introduction

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

Examples

HTML Code

<body>

<div class="success"><span>You won🎉🥳</span></div>
<div class="warning"><span>Stop please😭 </span></div>
<div class="error"><span>Serves you right! 🤬</span></div>
</body>

SCSS Code

%displayCentered{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

%notification{
width:80%;
text-align:center;
height:100px;
@extend %displayCentered
font-size:26px;
font-weight:700;
color:white;
margin:10px;
border-radius:5px;
box-shadow:0px 0px 11px 0px #bcbcbc;
}
body{
@extend %displayCentered
width:100%;
height:100vh;
overflow:hidden;
padding:0;
margin:0;
}
.success{
@extend %notification;
background-color:#8bc34a;
}
.warning{
@extend %notification;
background-color:#ff9800;
}
.error{
@extend %notification;
background-color:#f44336;
}