Post
Ask Question

SASS Tutorial

Introduction

 
In this article we will see how we can perform further operations of Sass ( Systematically Awesome Style Sheets) in our style. A basic introduction to get started with Sass is given here.
 
Below are the operations that we are going to perform.
  1. Variables in sass file
  2. Nesting of styles
  3. Use of mixins
  4. Importing files
  5. Pseudo classes
Prerequisite
 
Before learning SASS, you must have the basic knowledge of HTML and CSS.
 

Use of variables

 
Create a file variable.scss under scss folder.
 
Add the below contents,
  1. // using variables  
  2. $backgroundColor: blue;  
  3. $color: white;  
  4. $width: 400px;  
  5. $height: 200px;  
  6. .section{  
  7.     background-color: $backgroundColor;  
  8.     color: $color;  
  9.     height: $height;  
  10.     width: $width;  
  11. }  
  12. h2{  
  13.     background-color: $backgroundColor;  
  14.     color: $color;  
  15.     width:$width;  
  16. }  
Variables can be declared using ‘$’ symbol. This is useful when we are utilizing the same set of values in multiple areas of stylings.
 
Css file generated under css folder as follow.
  1. .section {  
  2.   background-color: blue;  
  3.   color: white;  
  4.   height: 200px;  
  5.   width: 400px; }  
  6.   
  7. h2 {  
  8.   background-color: blue;  
  9.   color: white;  
  10.   width: 400px; }  
We don’t need to consider what the css file is generating. This is the beauty of ScSS -- that it is soo easy and reliable to create the css file and its contents.
 
Create variable.html and add the below contents.
  1. <html>  
  2.     <head>  
  3.         <link href="css/variable.css" rel="stylesheet"/>  
  4.     </head>  
  5.     <body>  
  6.         <h2>Sass ---- Variable Example</h2>  
  7.         <div class="section">  
  8.             This is section with css attributes set via variable.css with the use of variables.  
  9.         </div>  
  10.     </body>  
  11. </html>  
Open this file in the browser and you can see the output. It will be pretty cool as expected.
 

Nesting of Styles

 
Create a file nestingStyle.scss under scss folder.
 
Add the below content:
  1. // Nesting of styles  
  2.   
  3. $backgroundColor : Blue;  
  4. $color: white;  
  5.   
  6. .first{  
  7.     background-color: $backgroundColor;  
  8.     height:400px;  
  9.     width: 400px;  
  10.     float: left;  
  11.   
  12.     .second{  
  13.         margin:10px;  
  14.         padding:20px;  
  15.         height: 300px;  
  16.         width: 300px;  
  17.         color: yellow;  
  18.         background-color: green;  
  19.         .third{  
  20.             margin:10px;  
  21.             padding: 20px;  
  22.             height: 100px;  
  23.             width: 150px;  
  24.             background-color: white;  
  25.             color: blue;  
  26.         }  
  27.     }  
  28. }  
Save the file and you will get the generated nestingStyle.css under css folder with the below content.
  1. .first {  
  2.   background-color: Blue;  
  3.   height: 400px;  
  4.   width: 400px;  
  5.   float: left; }  
  6.   .first .second {  
  7.     margin: 10px;  
  8.     padding: 20px;  
  9.     height: 300px;  
  10.     width: 300px;  
  11.     color: yellow;  
  12.     background-color: green; }  
  13.     .first .second .third {  
  14.       margin: 10px;  
  15.       padding: 20px;  
  16.       height: 100px;  
  17.       width: 150px;  
  18.       background-color: white;  
  19.       color: blue; }  
Create a nestingStyle.html and add the below content:
  1. <html>  
  2.     <head>  
  3.         <link href="css/nestingStyles.css" rel="stylesheet"/>  
  4.     </head>  
  5.     <body>  
  6.         <div class="first">  
  7.             Class first applied.  
  8.             <div class="second">  
  9.                 Class second applied.  
  10.                 <div class="third">  
  11.                     Class third applied.  
  12.                 </div>  
  13.             </div>  
  14.         </div>  
  15.     </body>  
  16. </html>  
Open this file in the browser and you will see the output with applied class and properties.
 
A simple programming logic has been applied in scss file and the styles has been generated.
 

Mixin and its use

 
Mixin is a chunk of reusable css or Sass that we need to inject to any element. This is something where we create a set of styles for a particular section or form and inject to any element by import statement.
 
Mixin can be created as follows,
 
@mixin mixin_name{
}
 
Let us create a scss file “mixInStyle.scss” and add the below content,
  1. //mixin   
  2.   
  3. $headingWidth : 40%;  
  4. $headingBackgroundColor: cyan;  
  5. $contentWidth: 100%;  
  6. $contentBackgroundColor: magenta;  
  7.   
  8. @mixin heading{  
  9.     h2{  
  10.         width: $headingWidth;  
  11.         background-color: $headingBackgroundColor;  
  12.     }  
  13.     div{  
  14.         width: $contentWidth;  
  15.         background-color: $contentBackgroundColor;  
  16.     }  
  17. }  
  18.   
  19. @mixin heading-description{  
  20.     span{  
  21.         background-color: green;  
  22.         text-decoration: underline;  
  23.     }  
  24. }  
  25.   
  26. .normal-banner{  
  27.     @include heading;  
  28. }  
  29.   
  30. .standard-banner{  
  31.     @include heading;  
  32.     @include heading-description;  
  33. }  
Save the file and you will get the css file “mixInStyle.css” with the below content,
  1. .normal-banner h2 {  
  2.   width: 40%;  
  3.   background-color: cyan; }  
  4.   
  5. .normal-banner div {  
  6.   width: 100%;  
  7.   background-color: magenta; }  
  8.   
  9. .standard-banner h2 {  
  10.   width: 40%;  
  11.   background-color: cyan; }  
  12.   
  13. .standard-banner div {  
  14.   width: 100%;  
  15.   background-color: magenta; }  
  16.   
  17. .standard-banner span {  
  18.   background-color: green;  
  19.   text-decoration: underline; }  
create html file “testMixin.html” with the below content,
  1. <html>  
  2.     <head>  
  3.         <link href="css/mixinInStyle.css" rel="stylesheet"/>  
  4.     </head>  
  5.     <body>  
  6.         <div class="normal-banner">  
  7.             <h2>Heading one!</h2>  
  8.             <div>This is description. This is description. This is description. This is description. This is description. This is description. This is description. </div>  
  9.         </div>  
  10.         <div class="standard-banner">  
  11.             <h2>Heading two!</h2>  
  12.             <span>This is small descriptions for the heading.</span>  
  13.             <div>This is description. This is description. This is description. This is description. This is description. This is description. This is description. </div>  
  14.         </div>  
  15.     </body>  
  16. </html>  
Open this file in the browser you will see the classes of scss defined styles applied on html contents.
 

Importing files in SaSS

 
Now we are going to learn how to import one scss file to another scss file.
 
Let us create three different files (variables.scss, mixin.scss, rootStyle.scss).
 
Under variables.scss we will be having all the variables used in rootStyle.scss.
 
Under mixin.scss we will have
 
Under rootStyle.scss we will import variables.scss and mixin.scss file.
 
Let’s start.
 
Create file variable.scss and add below contents.
  1. //variables declaration  
  2.   
  3. $headingWidth : 40%;  
  4. $headingBackgroundColor: cyan;  
  5. $contentWidth: 100%;  
  6. $contentBackgroundColor: magenta;  
Create file mixin.scss and add the below contents.
  1. @mixin heading{  
  2.     h2{  
  3.         width: $headingWidth;  
  4.         background-color: $headingBackgroundColor;  
  5.     }  
  6.     div{  
  7.         width: $contentWidth;  
  8.         background-color: $contentBackgroundColor;  
  9.     }  
  10. }  
  11.   
  12. @mixin heading-description{  
  13.     span{  
  14.         background-color: green;  
  15.         text-decoration: underline;  
  16.     }  
  17. }  
Create file rootStyle.scss and add the below contents,
  1. //import styles  
  2.   
  3. @import "variables";  
  4. @import "mixin";  
  5.   
  6. .normal-banner{  
  7.     @include heading;  
  8. }  
  9.   
  10. .standard-banner{  
  11.     @include heading;  
  12.     @include heading-description;  
  13. }  
Open prePros application and you will see the files that are being imported by some other css file will be configured as not to compile and generate css file. You can manually check to compile anyway.
 
SASS Tutorial
 
Create testImport.html file and add below contents,
  1. <html>  
  2.     <head>  
  3.         <link href="css/rootStyle.css" rel="stylesheet"/>  
  4.     </head>  
  5.     <body>  
  6.         <div class="normal-banner">  
  7.             <h2>Heading one!</h2>  
  8.             <div>This is description. This is description. This is description. This is description. This is description. This is description. This is description. </div>  
  9.         </div>  
  10.         <div class="standard-banner">  
  11.             <h2>Heading two!</h2>  
  12.             <span>This is small descriptions for the heading.</span>  
  13.             <div>This is description. This is description. This is description. This is description. This is description. This is description. This is description. </div>  
  14.         </div>  
  15.     </body>  
  16. </html>  
Open the html file in browser to see the output that will apply the styles from rootStyle.css.
 

Pseudo Classes

 
Pseudo classes are use to add extra effect like hover, after effect ect.
 
Create a file under scss folder named pseudo_style.css and add the below content,
  1. ul{  
  2.     list-style-type: none;  
  3.     margin: 0;  
  4.     padding: 0;  
  5.     overflow: hidden;  
  6.     background-color: #333;  
  7.       
  8. }  
  9. li{  
  10.     float:left;  
  11. }  
  12. li{      
  13. a{  
  14.         display: block;  
  15.         color:white;  
  16.         text-align: center;  
  17.         padding: 14px 16px;  
  18.         text-decoration: none;  
  19.           
  20.     }      
  21. }  
  22. li {  
  23.     a{  
  24.         &:hover{  
  25.             background-color: #111;  
  26.         }  
  27.     }  
  28.       
  29. }  
Save the file and you will get pseudo_style.css under css folder with the below generated content,
  1. ul {  
  2.   list-style-type: none;  
  3.   margin: 0;  
  4.   padding: 0;  
  5.   overflow: hidden;  
  6.   background-color: #333; }  
  7.   
  8. li {  
  9.   float: left; }  
  10.   
  11. li a {  
  12.   display: block;  
  13.   color: white;  
  14.   text-align: center;  
  15.   padding: 14px 16px;  
  16.   text-decoration: none; }  
  17.   
  18. li a:hover {  
  19.   background-color: #111; }  
Create testPseudoStyle.html and add the below content,
  1. <html>  
  2.     <head>  
  3.         <link href="css/pseudo_style.css" rel="stylesheet"/>  
  4.     </head>  
  5.     <body>  
  6.         <ul>  
  7.           <li><a class="active" href="#home">Home</a></li>  
  8.           <li><a href="#news">News</a></li>  
  9.           <li><a href="#contact">Contact</a></li>  
  10.           <li><a href="#about">About</a></li>  
  11.         </ul>          
  12.         </body>  
  13. </html>  
Open this file in the browser and you will see the output with defined class properties.


Similar Articles