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-
- 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.