Home > Blog > Sass – CSS with superpowers indeed!

Sass – CSS with superpowers indeed!

Sass - CSS with superpowers

As a web developer I have been writing CSS from scratch for a while now. Let me rephrase that, I have been forced to write CSS from scratch for a while now. Although I am fairly comfortable doing it, I have never been a big fan of it. CSS can be extremely fragile and in big projects with responsive design, quite a mess to deal with.

The advent of a host of new CSS preprocessors and some new web projects at Xignite gave us -the web team at Xignite, the opportunity to delve into and evaluate some of these. Sass came out the winner and here is why I personally am a big fan.

 

Variables for everyone!

Remember the time when, to change a font color you had to look through an entire css file and replace them one by one? Also keeping in mind not to change the colors of the wrong styles. Well, you don’t need any of that anymore with Sass variables! Define once and use wherever you want, change once and it reflects everywhere!

Now mind you Sass the preprocessor, has two kinds of syntax, SASS and SCSS. SCSS is the newer one and I personally prefer it, reasons require a post in itself but I will link to this which is a nice resource for side by side comparison.

$flat-asbestos: #7f8c8d;
$flat-silver: #bdc3c7;
h4{
   font-family: "Raleway";
   color: $flat-silver;
}

The best part is that this can be extended to small code bits and blocks of css styles that are constantly repeated. These are called @mixins. Consider the following 2 styles

.item{
     background-color: $flat-asbestos;
     text-align: center;
     height: 300px;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.footer-content{
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

Such blocks of styles are constantly repeated in css files. Especially when we have to deal with webkit, moz and other styles. We can get around this with Sass by using @mixins.

@mixin border-radius-3{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.item{
     background-color: $flat-asbestos;
     text-align: center;
     height: 300px;
     @include border-radius-3;
}
.footer-content{
     @include border-radius-3;
}

Nesting for all!

A big pet peeve of mine is the way CSS selectors are organized in regular CSS. Sass lets you naturally nest CSS styles that make it easy to read and apply.

.header{
  text-align: center;
  color: $white;
  h1{
     font-family: "Raleway";
     text-shadow: "4px 3px 0px $flat-wetAsphalt, 9px 8px 0px rgba(0, 0, 0, 0.15);";
  }
}

The h1 style here will naturally apply to h1s inside the “header” class. This follows a very visual hierarchy of styles. Much more intuitive to read and definitely easier to write.

 

Keeping it all DRY

Probably the most impressive feature of Sass is the ability to “inherit” or “extend” styles. This lets you adhere to the DRY ( Don’t Repeat yourself ) principle. Less code duplication means less chances of error and more robust and reliable CSS management.

.message{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend: .message;
  border-color: red;
}
.warning{
  b@extend: .message;
  pborder-color: yellow;
}

Keeping it all in Visual Studio

Visual studio does not support Sass syntax highlighting out of the box. Neither does it understand the related errors for intellisense to be any good. For this purpose there are multiple add-ons that can help you out. The one that we use is called Mindscape work bench. It lets you create, update and maintain Sass files in your project. It automatically updates the related CSS file when you save your Sass file. This is extremely useful, because if not for this, you would have to use Sass’s built in toolbelt to watch the file and compile it to CSS every time its modified. This is not particularly hard, but its good to be able to not care about it while development.

 

So what about Sass again?

Although I was a bit skeptical initially to introduce Sass to the big web projects on the team, I must say that we have been pleasantly surprised by the results. Sass is basically an extension of CSS (the SCSS syntax). So in any Scss file we can also write regular valid CSS. We can also use Sass’s built in convertors to convert old CSS files to very usable Scss files.

Sass does not change the mentality behind designing in any way. So if the CSS is not well thought out then Sass will not make it any better. It is simply a tool to make it more convenient and efficient. So long as we stick to the best CSS design and organization practices Sass can be of great help in making it even better!

Check out Xignite Labs! It was all built using Sass.

 

__________

For more info on how Xignite's market data cloud can improve your business processes, request a consultation with one of our data experts.

To test drive our market data APIs and experience for yourself how easy they are to integrate into your applications, request a free trial.