introduction to SASS

In my previous lesson I’ve told what are CSS preprocessors. This post is consist of introduction to SASS. In this post I’ll tell you about SASS (Syntactically Awesome Style Sheets). There are also other CSS preprocessors like SASS,LESS,SCSS,Stylus etc..But i prefer to use SASS. Basically SASS & SCSS are same, only difference is writing syntax that I’ll told you in my next post.

So, we were talking about SASS. How to use SASS? what is the syntax of SASS? Don’t worry I’ll explain to you. Look at the following Code.

CSS

nav{
	width: 100%;
}
nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
nav ul li{
	float: left;
	margin: 5px 10px;
}
nav ul li a{
	display: inline-block;
	color: #ccc;
}

SCSS

nav{
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	li{
		float: left;
		margin: 5px 10px;
	}
	a{
		display: inline-block;
		color: #ccc;
	}
}

As you can see above snippets of CSS & SCSS that will produce the same result but SASS is a shorthand for CSS. You can see I wrap up the whole CSS into “nav{}”, and when we will compile our SASS file result will be the same as you can see first CSS snippet. This is the power of SASS because SASS allows us to make nested CSS rules. There are more features in SASS which we will learn in our next SASS tutorials. This is the only introduction to SASS and this is not the end.