saas1

Sass is the most mature, stable, and powerful professional CSS extension language in the world initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is completely compatible with all versions of CSS. We take this compatibility, so that you can use any available CSS libraries. Sass boasts more features and abilities than any other CSS extension language out there.

There is endless number of frameworks built with Sass. Compass, Bourbon, and Susy just to name a few.

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plug-in.

What’s new?

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 style sheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Pros and Cons

SASS Pros:

1. Clean Code

If you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even CoffeeScript world, it will come very natural to you – writing mixins, functions and generally any reusable stuff in sass is much ‘easier’ and readable than in scss(subjective).

2. Shorter Development Time

With Sass, you can save a lot of time if you know how to use it well. In addition to css, sass lets you to write functions, mixins, you can import styles and many such time saving bits. With proper naming of classes, you can create your own common styles which can be used whenever you want instead of calling same styles repeatedly. This saves a lot of time just like bootstrap does when you need a ‘text-center’ class or a ‘pull-right’ to position your element.

3. Consistency

It is always easier to reuse what we have already written than to write new patterns. Along with the fact that this saves a lot of time, you can also have a consistent pattern throughout your page. You won’t have to scale through each element while continuing through the website development.

4. Reduced HTTP requests

Unlike the regular css, Sass lets you to breakdown your style sheet into several bits or parts and can be called using @import keyword. The Sass compiler will then combine your style sheet into a single css file, which will not only get your style sheet organized, but also will reduce the HTTP requests passed and thus allow it to load much faster.

SASS Cons:

1. Space Sensitive

Sass is space sensitive. Sass does not support use of extra unnecessary spaces. If we, even accidentally leave an extra space, or forget to include a semi-colon, sass compiler will show an error which sometimes gets really annoying.

For example:

An error on line 3057 due to missing braces

saas2

2. Initial Time Investment

The main advantage of using sass is that we can reuse the same styles more easily. But to do that, we initially need to write up all the necessary styles which are to be later imported or included and which can be considered time consuming. Nevertheless, it’s worth it.

In general, there are many advantages and disadvantages of using sass. If you know to use it well, you could get the best out of it. Even some of the disadvantages can be considered as an advantage. Like a small mistake in the syntax will make the compiler to show an error message. This may be annoying but there might come certain situations when this could actually help you to save a lot of time. For example, in css, we make a small mistake like forget a space but we won’t notice it and the compiler will show no error. But we won’t get the expected result either. So we might actually spent lots of time researching on what went wrong until we figure out that it was a small space issue. In sass, the compiler will immediately show the error even if a small space is missing and could be helpful.

Quick Tips

When you’re starting a project and you intend to do it in sass, these tips may come handy:

- Keep your sass style sheet structured so that it will be easy to maintain.

For example:

.logo {

Float: left;

Width: 240px;

img {

margin:0;

vertical-align:middle;

@media (max-width: $x-minimum-width) {

width:100%;

height:auto;

}

}

@media (max-width: $x-minimum-width) {

width:190px;

}

}

- Sass variables must be effectively used. It might look difficult in the beginning but when you get used, it will be really helpful.

For example:

$x-minimum-width:480px;

h2 {

font-size:24px;

@media (max-width: $x-minimum-width) {

font-size:18px;

}

}

- Avoid using mixins. Mixins are more like copy paste. Not much effective though.

For example:

@mixin transition($property) {

transition: $property .3s ease-in;

-webkit-transition: $property .3s ease;

-moz-transition: $property .3s ease;

-o-transition: $property .3s ease;

-ms-transition: $property .3s ease;

}

a {

color:$primary-color;

cursor:pointer;

@include transition(color);

&:hover {

color:$secondary-color;

text-decoration:none;

}

}

Compiling a SASS file

To create a sass file, first you need to create a normal css file. Save it as ‘file-name’.scss in your css directory where your normal css files are saved. Also create a normal css file in the same directory. The styles you write in your scss file will be automatically added to your css file by the sass compiler. To compile the sass file, you need to perform the following steps:

  1. Open command prompt

saas3

  1. Navigate to location where your CSS files are saved. For example: cd C:\wamp\www\example\wp-content\themes\example\css

saas4

  1. Write the SASS command to start compiling the SASS file. Command: sass –watch custom.scss:custom.css

saas5

- Shekhar R