SASS tutorial
Introduction to SASS
- Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
- Sass is written in Ruby.
- Provides variables, functions, conditional statements and more.
- Sass files can be splited up into modules for bigger projects.
- Browser doesn't understand Sass code.
What you schould know
- Programming fundamentals - functions, conditional statements etc.
- CSS !
Tools
- You'll need a Sass processor. It could be any of your choice.
1.Get to know
HTML
Simple HTML file that you write normally.
<div class="block">
<p>Testing Sass</p>
<div class="box"></div>
</div>
SASS
.scss files goes to src folder.
.box{
border: 10px solid crimson;
height: 100px;
width: 100px;
}
CSS
.css files will be compiled and stored in a seperate directory.
.box {
border: 10px solid crimson;
height: 100px;
width: 100px;
}
2 Nesting in SCSS
Nesting is not preffered due to it becomes hard to know that why a specific element is having style. Because of they will not have a class or id.
HTML
<div class="block">
<p>Nesting</p>
<div class="nest">
<span>Hey, what's up ?</span> <br />
<a>I am green text.</a><br />
<a><span>I am span under anchor tag.</span></a>
</div>
</div>
SASS
.nest{
color:red;
border: 10px solid cornflowerblue;
height: 100px;
a{
color:green;
span{
color:blue;
}
}
}
CSS
.nest {
color: red;
border: 10px solid cornflowerblue;
height: 100px;
}
.nest a {
color: green;
}
.nest a span {
color: blue;
}
3 Variables
Sass variables are similar as they are in other programming languages.
Syntax: $variable-name:vaue;
After the compilation the css will hold the exact value which was passed to the sass variable not the variable itself.
HTML
<div class="block">
<p>Variables</p>
<span class="rtstyle">rtCamp is cool !</span>
</div>
SASS
$rtblue: #3478bd;
$rtsize: 24px;
.rtstyle{
color:$rtblue;
font-size:$rtsize;
}
CSS
.rtstyle {
color: #3478bd;
font-size: 24px;
}
4 Mixins
Mixins are re-usable chunks of code.
Mixins can also be used as functions.
Syntax: @mixin mixin-name{ ... }
and to use that mixin inside some class:
@include mixin-name()
HTML
<div class="block">
<p>Mixins</p>
<div class="mixin-demo">
<div class="mixin-blue"></div>
<div class="mixin-red"><span>Hey I'm span</span></div>
</div>
</div>
SASS
@mixin main-mixin{
border: 10px solid;
.mixin-blue{
height:50px;
margin:5px;
border:3px solid royalblue;
}
.mixin-red{
height:50px;
margin:5px;
border:3px solid red;
}
.mixin-red span{
color: green;
}
}
.mixin-demo{
@include main-mixin();
border-color: gold;
}
CSS
.mixin-demo {
border: 10px solid;
border-color: gold;
}
.mixin-demo .mixin-blue {
height: 50px;
margin: 5px;
border: 3px solid royalblue;
}
.mixin-demo .mixin-red {
height: 50px;
margin: 5px;
border: 3px solid red;
}
.mixin-demo .mixin-red span {
color: green;
}
5 Mixins with arguments
Mixins with arguments works same as functions like in other programming laguages.
You pass variables in the arguments and function returns the output !
Just remember to give meaningful names to the variables
Syntax:
@mixin mixin-name($variable-name) {
height: $variable-name;
}
// To use that mixin ...
.some-clss {
@include mixin-name(1000px);
}
HTML
<div class="block">
<p>Mixin with arguments</p>
<div class="mixin-arg-eg"></div>
</div>
SASS
@mixin mixin-arg($h, $w) {
height: $h;
width: $w;
}
.mixin-arg-eg {
@include mixin-arg(100px,1000px);
border:10px solid crimson;
}
CSS
.mixin-arg-eg {
height: 100px;
width: 1000px;
border: 10px solid crimson;
}
6 Importing files
How about keeping your variables and mixins in different directories ?
That's you should be doing ! (Best practices)
Well you can keep all the scss in different files to make your code modular.
Syntax: @import "file-tobe-import.scss";
HTML
<div class="block">
<p>Import</p>
<div class="import-demo">
<span>Hey</span>
</div>
</div>
SASS
@import "imported.scss";
.import-demo{
@include gradient();
height: $height;
color:white;
font-size: 30px;
}
//file-2:importend.scss
$height : 100px;
@mixin gradient{
background: linear-gradient(to right, #5c258d, #4389a2);
}
CSS
.import-demo {
background: linear-gradient(to right, #5c258d, #4389a2);
height: 100px;
color: white;
font-size: 30px;
}
7 Pseudo Classes/Elements
To add pseudo elements to your classes use &:<element>
HTML
<div class="block">
<p>Pseudo Classes</p>
<div class="pseudo-example"></div>
</div>
SASS
.pseudo-example{
height:100px;
background: #4b6cb7;
&:hover{
background: #cb2d3e;
}
}
CSS
.pseudo-example {
height: 100px;
background: #4b6cb7;
}
.pseudo-example:hover {
background: #cb2d3e;
}
8 Math Operations
Simple math operations like addition, Subtraction, Multiplication, Division are possible in sass
To perform math operation just wrap the things in () like height: (300px/3);
HTML
<div class="block">
<p>Math Operations</p>
<div class="math-demo">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</div>
</div>
SASS
.math-demo{
border: 10px solid cornflowerblue;
width: 720px;
height: 110px;
margin: auto;
li{
width: (700px / 3);
border: 10px solid crimson;
float: left;
height: 90px;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
}
CSS
.math-demo {
border: 10px solid cornflowerblue;
width: 720px;
height: 110px;
margin: auto;
}
.math-demo li {
width: 233.33333px;
border: 10px solid crimson;
float: left;
height: 90px;
}
.math-demo ul {
list-style: none;
padding: 0;
margin: 0;
}
9 Color Functions
There are many functions available to play around with colors.
Links are provided at the end.
HTML
<div class="block">
<p>Color functions</p>
<div class="color-example"></div>
</div>
SASS
.color-example{
height: 100px;
background: #1d518b;
&:hover{
background: lighten(#1d518b,20);
}
}
CSS
.color-example {
height: 100px;
background: #1d518b;
}
.color-example:hover {
background: #3883d6;
}
10 @content in Sass
@content keyword is like a place holder.
It will grab whatever comes at the same possition where it is defined.
HTML
<div class="block">
<p>@content keyword</p>
<div class="content-demo">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</div>
</div>
SASS
@mixin mQ($arg) {
@media screen and (max-width: $arg){
@content;
}
}
.content-demo{
border: 10px solid cornflowerblue;
width: 100%;
height: 110px;
margin: auto;
li{
width: (100%/ 3);
border: 10px solid crimson;
float: left;
height: 90px;
@include mQ(720px){
width:100%;
}
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
}
Here when we included our mixin @content will be replaced by the content in the mixin ie. width:100%
CSS
.content-demo {
border: 10px solid cornflowerblue;
width: 100%;
height: 110px;
margin: auto;
}
.content-demo li {
width: 33.33333%;
border: 10px solid crimson;
float: left;
height: 90px;
}
@media screen and (max-width: 720px) {
.content-demo li {
width: 100%;
}
}
.content-demo ul {
list-style: none;
padding: 0;
margin: 0;
}
11 If with multiple argument
There are many conditional statements available in Sass.
You can check them out on the link provided at the end
HTML
<div class="block">
<p>If with Multiple Arguments</p>
<div class="mul-arg-example"></div>
</div>
SASS
//arrays starts at 1 here !!!
@mixin mul-arg($list...){
@if length($list) == 1{
height: nth($list, 1);
}
@if length($list) == 2{
height: nth($list, 1);
border-color: nth($list, 2);
}
}
.mul-arg-example{
border : 10px solid red;
@include mul-arg(100px, blue);
}
$list...
accepts multiple arguments that can be in any number.
length($list)
returns number of elements in the $list.
nth($list,2)
variable at possition 2 in the $list.
CSS
.mul-arg-example {
border: 10px solid red;
height: 100px;
border-color: blue;
}
Useful Links
Loops :
https://clubmate.fi/for-while-and-each-loops-in-sass/
https://www.sitepoint.com/sass-reference/loops/
https://www.tutorialsteacher.com/sass/sass-control-directives
Color Functions :
http://sass-lang.com/documentation/Sass/Script/Functions.html
Creator's quote
Do follow coding standards
Divide code in modules ( Makes maintenance easy ).
Documentation is the best way to learn.
Create !