Introduction To SASS

What is SASS (Syntactically Awesome Style Sheet)?

As the stylesheets are getting more complex and the files are getting larger, SASS is here to help us to get rid of these problems. SASS is a framework, which helps developers to reduce CSS code.

Why SASS ?

SASS helps to minimize the code complexity of CSS and can be well organized.

The code duplication can be removed if you use SASS.

Primary Requisites to start SASS

  • Need to know the basics of CSS
  • Knowledge in HTML

SASS supports two types of syntax mainly. They are SCSS and SASS.

The main difference is the braces{ } and the semicolon.The table, given below, shows the difference between the two syntax-

SASS SCSS
.message
border: 1px solid #ccc;
padding: 10px;
color: #333 .
message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

I will follow SCSS syntax throughout my blog

In order to have the minimized code or pre processed code, SASS supports the features, given below-

  1. Variables

The first thing which comes to your mind is when you hear the variable is about the variables in C# or JavaScript or any programming language because we use the variables to assign the values. SASS variables are also used for the same purpose. You can assign hex values, strings of text, colors, numbers etc.

You can create a variable, using $ symbol.

Example - $body-color: red;

Nesting

XML /HTML document has a nice code hierarchy, where the code is nested accordingly, based on the tags through which the code looks good, easy to understand and maintain. Don’t you think, why can’t we have the same for CSS? Yes, SASS made it possible. We can nest the CSS rules easily in an efficient way.

The example is given below-

SCSS CSS
footer {
.navbar-inverse {
Background-color:lightgoldenrodyellow;
}
.navbar-nav {
float: left;
margin: 0;
> li > a {
padding-top: 15px;
padding-bottom: 15px;}}}
footer .navbar-inverse {
background-color: lightgoldenrodyellow;
}
footer .navbar-nav {
float: left;
margin-top: 0px; }
footer .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 15px; }

Partial

We usually face a lot of problems when our CSS file gets larger and when you want to find something. Sometimes, it’s annoying and thanks to SASS, as it made our life easy to organize our code by dividing into the different parts by creating a partial file. Partial is used to split your code and refer the partial file, where you want to use.

We use “_” to create a partial file.

Example: _mainmenu.scss

Does partial files get compiled?

No, by seeing the “_” symbol in front of the file name, the compiler ignores and doesn’t compile or generate a CSS file.

Comments and Import:

SASS supports multiline(/* */) and single line (//) comments. When the file is compiled, the multiline comments are preserved and single line comments are removed.
 
.SCSS .CSS
//I appear only in SCSS
/* I appear in SCSS and in CSS*/
.main-menu {
background-color: red;
}
/* I appear in SCSS and in CSS*/
.main-menu {
background-color: red;
}

Import is used to add SCSS files.

Example - Import “_mainmenu”

Mixins

A mixin lets you write all CSS declarations and reuse throughout your project. You can even pass the values to your mixin.

SCSS CSS
@mixin my-border($color, $width) { border: { color: $color; style: $dashed; } }
p { @include my-border (blue); }
p {
border-color: blue;
border-style: dashed; }

Extend/Inheritence

The @extend helps you to reuse CSS properties from one selector to the other selector. It helps SASS to not to repeat the same properties multiple times.

SCSS CSS
.header { border: 1px solid #ccc; padding: 10px; color: #333; }
.alertMes {
@extend .header;
border-color: green;
}
.header, . alertMes {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green;
}

Let me know your feedback or please correct me, if something is wrong. This my understanding from what I learned from the community.

Ebook Download
View all
Learn
View all