SASS in 5 minutes: All in one

syntactically awesome stylesheets or SASS is a language that can extend your CSS with superpowers.

modern UIs are extremely complex and if you attempt to build one with plain CSS you’ll find yourself repeating yourself often.

SASS comes to the rescue by providing a compiler that allows us to write style sheets in a completely different language.

Two different languages to be exact the original indented syntax that you find in .sass files remove the syntactic salt of semicolons and curly braces(; {}).

.sass File Example

nav
	ul
		margin:0
		padding:0
		list-style: none

	li
		display: inline-block

	a
		display:block
		padding:6px 10px
		text-decoration: none

but the more popular version is the superset syntax that you find in SCSS files.

you can write regular CSS then extend it with additional bonus features as needed

.scss file Example

nav{

	ul{
		margin:0
		padding:0
		list-style: none
		}
	li {
		display: inline-block
	}

	a{
		display:block
		padding:6px 10px
		text-decoration: none
	}
	

SASS has been around for nearly 15 years and one of its original killer features was variables.

use a dollar sign to name a variable then reference it somewhere else in your code.

now if that value ever changes you only have to update one line of code.

$red: #FF0000 (0, 100%, 50%);

	.button.danger{
		color: $red;
		border: 1px solid $red;
	}

killer feature number two is nesting in many cases.

classes are used as name spaces which means they’re often duplicated over and over again

.button a {
		font-weight: bold;
	}

	.button.danger{
		color:red;
	}

	.button.warning{
		color:yellow;
	}

we can avoid this duplication by nesting styles inside the parent.

SASS FILE

.button{
	.success{
		color:red;
	}
}

Converted CSS FILE

.button .success {
		color:red;
	}

bydefault these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand.

which itself is a tool that tells sas to combine the parent selector with the nested child selector.

SASS FILE

	.btn{
		&:focus{};
		&:hover{};
		&:active{};
	}

Converted CSS FILE

.btn:focus{}
	.btn:hover{}
	.btn:active{}

READ MORE : Why We Should Move from CSS to SASS? Beginners

Other issue with css is that you’ll often find yourself including a similar group of styles on multiple classes.

Mixins allow you to encapsulate a group of styles then apply those styles anywhere in your code using the include keyword.

@mixin flex-column{
	display: flex;
	flex-direction: column;
	background: red;
}

.card{
	@include flex-column;
}

.aside{
	@include flex-column;
}

mixins can also take arguments to create a large number of similar classes.

@mixin new-button ($color, $bg){
	display: flex;
	color:$color;
	background:$bg;
}

.btn-orange{
	@include new-button(black,red);
}

programmatically like a bunch of different colored buttons for example.

in addition SASS provides a whole suite of tools to help you write more programmatic code use if or else in a mixin for conditional logic.

@mixin theme-colors($theme){
	@if $theme == 'light' {
		background-color: $light-bg;
	} @else {
		background-color: $dark-bg;
	}
}

or create an array of values with a variable then loop overthem with each.

$sizes: 40px, 50px, 80px;

@each $size in $sizes{
	.icon-#{$size}{
		font-size:$size;
	}
}

You might even extract all this logic into a reusable function or sas might already have a built-in function for you ready to go.

@function sum($numbers){
	$sum:0;

	@each $number in $number {
		$sum: $sum + $number;
	}

	@return $sum;
}

if you need to adjust a color you can use the lighten or darken functions to adjust a color by a predictable value.

$base-color: red;

.card {
	background: lighten($base-color, 25%);
	color: darken($base-color, 25%);
}

The compiler will take your code and convert it into valid CSS that can run in the browser.