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;
}
Result
See the Pen
Untitled by Comfort (@ajalacomfort16)
on CodePen.
Editor’s notes
Nothing to add here 🥰.