Everything that you need to know about Sass

Sass (Syntactically Awesome Stylesheets), nothing but CSS with superpowers. Sass introduces new concepts like variables, mixins, and nesting into the CSS code you already know. These concepts ultimately make your CSS awesome, easier to write and more dynamic.

I have been using LESS CSS for quite some time and always wanted to learn Sass for quite a while. So, here today, I am sharing my experience with Sass and the powers it has. There were couple of syntical difference in Sass compared to LESS.

Couple of things to understand and learn before starting:
1. Sass (.sass file extension) — also known as the indented syntax
2. SCSS (.scss file extension) — a CSS-like syntax.
3. Mixins(@mixin) — make groups of CSS declarations that we can reuse throughout our site. CSS3 styles that require vendor(browser) prefixes are a perfect example of when to use a mixin.
4. Import(@import) — CSS @import pulls in other style sheets but it does this by making another HTTP request. Usually used to import fonts. In Sass, since it is a preprocessor that will pull in that file before it compiles the CSS.
5. Extend(@extend) — @extend is one of the most useful features that allows us to share a set of CSS properties from one selector to another. It is more like inheriting the CSS properties, in programing terms.

In the below snippet, I have explained how the syntax and the way to write the same block of code in CSS, SCSS and Sass.

.CSS

[code lang=”css”]
.row {
width:960px;
}
.row p {
color: black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.row2 {
width: 960px;
background-color: white;
}
[/code]

.SCSS — Same as CSS but has variables and nesting.

[code lang=”css”]
$black: #000000; // Variable decalration
// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.row {
width:960px;
p {
color :$black;
@include border-radius(5px);
}
}

.row2 {
@extend .row;
background-color: #ffffff;
}
[/code]

.Sass — Same as SCSS without semicolons, brackets, and dependent on indentation.

[code lang=”css”]
// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

!black: #000000

.row
width:960px
p
color: $black
+border-radius(5px)

.row2
@extend .row
background-color: #ffffff
[/code]

SCSS is definitely closer to CSS than Sass. Sass is shorter and maintains code hygenine, but sometimes difficult to interpret. One wrong indetation, breaks the entire CSS. On the other hand SCSS is easier to read and understand.

Also Sass comes with couple of color functions like lighten, darken, rgba. For more check out here.

Note: In Sass the @mixin, @include and $(variable), are represented by single characters = for (@mixin), + for (@include) and ! for ($ i.e. Variable declaration).

Trust me Sass saves alot of time, get started it with today. Also checkout the Saas Way.