- SASS provides control statement to better css authoring.
- Some of the useful controls are:-
—@IF , @IF..ELSE, @FOR,@WHILE,@EACH
- You can check my previous posts to get started with SASS.
- In this Demo, “We will see how to use IF,FOR, WHILE and EACH statement while writing SCSS code”.
- Below HTML markup is been used for styling with css classes.This markup has two container DIV elements where we are going to apply our SCSS generated css classes,
<!DOCTYPE html>
<html>
<head>
<title>More on SASS</title>
<link rel="stylesheet" type="text/css" href="my-style.css">
</head>
<body>
<div class='container-1'>
container-1
</div>
<div class='container-2'>
container-2
</div>
</body>
</html>
- Below SCSS file shows the code for styling this markup and detail explanation of each block,
/*Global values*/
$containerHeight : 50px;
$containerWidth : 600px;
$backgroundColor:#000000;
$fontSize:16px;
/*This is parent container from which all other container classes are extended*/
.container{
height: $containerHeight;
width : $containerWidth;
background: $backgroundColor;
margin: 10px;
}
/*fontColor: This is a SCSS MIXIN function which takes a string as input and checks
*its name.If it is container 1 then it makes the font color as #FF0000
*else it makes the font color as #0000FF
*/
@mixin fontColor($containername){
@if $containername == container-2 {
color:#FF0000;
}
@else{
color:#0000FF;
}
}
/*This is container-1 it is extending container class and
*Calling the fontColor MIXIN by passing it class string.This results
*in font color #0000FF
*/
.container-1{
@extend .container;
@include fontColor(container-1);
}
/*This is container-2 it is extending container class and
*Calling the fontColor MIXIN by passing it class string.This results
*in font color #FF0000
*/
.container-2{
@extend .container;
@include fontColor(container-2);
}
/*FOR : This loop is for styling the border for both
*the contaner-1 and container-2.For every iteration
*of this loop it is multiplying the iteration number
*with 5px.Hence container-1 will have 5px border and container-2
*will have 10px border.
*/
@for $index from 1 through 2 {
.container-#{$index} {
border: 5px * $index solid grey;
}
}
/*EACH : This loop is for styling the font size for both
*the contaner-1 and container-2.For every iteration
*of this loop it is summing the previous font size with 10
*.Hence container-1 will have 26px font size and container-2
*will have 36px font size.
*/
@each $container in container-1,container-2 {
$fontSize : $fontSize + 10;
.#{$container} {
font-size: $fontSize;
}
}
/*WHILE : This loop is for styling the font weight for both
*the contaner-1 and container-2.For every iteration
*of this loop it is multiplying the container number with 300.
*Hence container-1 will have 300 font weight and container-2
*will have 600 font weight.
*/
$totalContainer: 2;
@while $totalContainer > 0 {
.container-#{$totalContainer} {
font-weight:300 * $totalContainer;
}
$totalContainer: $totalContainer - 1;
}
- Below CSS file has the compiled CSS code,
/*Global values*/
/*This is parent container from which all other container classes are extended*/
.container, .container-1, .container-2 {
height: 50px;
width: 600px;
background: black;
margin: 10px; }
/*fontColor: This is a SCSS MIXIN function which takes a string as input and checks
*its name.If it is container 1 then it makes the font color as #FF0000
*else it makes the font color as #0000FF
*/
/*This is container-1 it is extending container class and
*Calling the fontColor MIXIN by passing it class string.This results
*in font color #0000FF
*/
.container-1 {
color: #0000FF; }
/*This is container-2 it is extending container class and
*Calling the fontColor MIXIN by passing it class string.This results
*in font color #FF0000
*/
.container-2 {
color: #FF0000; }
/*FOR : This loop is for styling the border for both
*the contaner-1 and container-2.For every iteration
*of this loop it is multiplying the iteration number
*with 5px.Hence container-1 will have 5px border and container-2
*will have 10px border.
*/
.container-1 {
border: 5px solid grey; }
.container-2 {
border: 10px solid grey; }
/*EACH : This loop is for styling the font size for both
*the contaner-1 and container-2.For every iteration
*of this loop it is summing the previous font size with 10
*.Hence container-1 will have 26px font size and container-2
*will have 36px font size.
*/
.container-1 {
font-size: 26px; }
.container-2 {
font-size: 36px; }
/*WHILE : This loop is for styling the font weight for both
*the contaner-1 and container-2.For every iteration
*of this loop it is multiplying the container number with 300.
*Hence container-1 will have 300 font weight and container-2
*will have 600 font weight.
*/
.container-2 {
font-weight: 600; }
.container-1 {
font-weight: 300; }
- The below screenshot shows the output of the above markup in browser,
