You will learn the SASS basic features and how it can easily help you creating the fast and elegant way in css. Once you know how to use it, you will never want to style in the old way you do.

1. Variables in SASS

Declaring variables in SASS is pretty simple, what you need to do is to include a dollar sign ($) at the front of your css variable. See the following example in declaring your first variables in SASS.

$color-text: #000;
$color-link: #105ec7;
$color-heading: #ccc;
$body-size: 12px;
$heading-size: 20px;

body{
	color: $color-text;
	font-size: $body-size;
}

a{
	color: $color-link;
}

h1,h2,h3{
	color: $color-heading;
	font-size: $heading-size;
}

If we compile our SASS file, it will return the following CSS syntax result.

body{
	color: #000;
	font-size:12px;
}

a{
	color: #105ec7;
}

h1,h2,h3{
	color: #ccc;
	font-size: 20px;
}

Alternatively, if you have multiple styles, you can easily group them into one. This feature is called mixin. Please see the following example.

@mixin heading-title{
	color:#ccc;
	font-size: 20px;
}

h1,h2,h3{
	@include heading-title;
}

After the compilation, it will return as follow:

h1,h2,h3{
	color: #ccc;
	font-size: 20px;
}

2. SASS Nesting Features

<div class="content-box">
	<div class="content-inside">
		<h3>Learn fantastic Sass features.</h3>
		<p>This is great and I love Sass so much.</p>
	</div>
</div>

From above example code, we can see that we have 3 level hierarchy of DOM structures. It started with 1 div parent, and is followed by another child div and finally the content of the div which is the h3 tag and p tag. If we want to style those structures, we use the nested features built in SASS, this can be easily done by doing this.

.content-box{
	border:solid 2px black;
	background:#ccc;
	
	.content-side{
		padding: 10px;
		background:yellow;
		
		h3{
			text-decoration:underline;
			font-weight:bold;
		}
		
		p{
			line-height:1.5em;
			font-style:italic;
		}
	}
}

When we perform a compilation in SASS, it will result the nested style into the following CSS code.

.content-box{
	border:solid 2px black;
	background:#ccc;
}	

.content-box .content-side{
	padding: 10px;
	background:yellow;
}

.content-box .content-side h3{
	text-decoration:underline;
	font-weight:bold;
}

.content-box .content-side p{
	line-height:1.5em;
	font-style:italic;
}

Pretty amazing right the nested features in SASS? It saves time to write and more easily to manage the nested styles.

3. SASS Selector Using Ampersand

What does this feature do is the ampersand represents the parent selector. For example: let's say we have the following html code.

<ul class='menu'>
	<li><a href='#'>Link 1</a></li>
	<li><a href='#' class='link-normal'>Link 2</a></li>
	<li><a href='#' class='link-italic'>Link 3</a></li>
</ul>	

If we write the following SASS syntax as below:

.menu{
	margin:0;
	padding:0;
	list-style:none;
	
	a{
		color:blue;
		text-decoration:none;
		font-size:12px;
		font-weight:bold;
		
		&:hover{
			text-decoration:underline;
		}
		
		&.link-normal{
			font-weight:normal;
		}
		
		&.link-italic{
			font-style:italic;
		}
	}
}

If we compile SASS file, it will return as below CSS.

.menu{
	margin:0;
	padding:0;
	list-style:none;
}

.menu a{
	color:blue;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
}

.menu a:hover{
	text-decoration:underline;
}

.menu a.link-normal{
	font-weight:normal;
}

.menu a.link-italic{
	font-style:italic;
}

Those are the basic features so far, we will add more features soon. If you have any question or want to ask something, please post your comment below.