As part of the front-end development team at Revium, it’s my prerogative to continually strengthen and streamline our design and development processes. After many hours of reviewing best practice and web standards, our expert design team have begun incorporating Sass into our development processes.

As part of the front-end development team at Revium, it’s my prerogative to continually strengthen and streamline our design and development processes. After many hours of reviewing best practice and web standards, our expert design team have begun incorporating Sass into our development processes. We have seen a resultant rise in the quality and speed of our development activity in the face of increasing browser and device complexity.

What is Sass?

Cascading Style Sheet (CSS) along side HTML, is the base programming language for every website on the internet. So how does Sass fit in? In short, Sass is an extension of CSS that enables new and awesome features, so awesome in fact it’s in the name - Syntactically awesome style-sheets.

To quote the official Sass website, “Sass makes CSS fun again. 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 plugin.” Learn more about Sass from its creators.

Why we use it?

Revium has adopted the DRY or "don't repeat yourself" coding methodology. This allows us to keep our code clean and easy to understand. This is just one of many reasons we made Sass part of our coding regime.

Other benefits and advantages of Sass

  • Global Variables make it quick and easy to update corporate colours, font families, font size and much more, across all CSS files
  • Nested CSS and Selector Inheritance reduces lines of code and keeps it clean for other developers
  • Mixins allow us to call-in big chunks of powerful Sass with one line of code

Wa' Sass in it for me?

The benefits and advantages of Sass are not just hidden within the backend code of a website. They extend to the front-end visuals to ensure browser compliance and a compatible and functional responsive design.

Browser testing and responsive design

The browser compliance challenge is a thorn in the side of any modern front-end web developer. At a minimum we need to test on all major browsers (Chrome, Safari, Firefox, Opera and Internet Explorer), in many different versions as well as on a myriad of device sizes and orientations.

Sass combined with other tools like Compass and Edge Inspect help streamline the testing process. Here's how;

Browser testing improvements with Compass

Most major browsers have their own layout engine, meaning they read the CSS and HTML differently. As a result they require different CSS values to do the same thing. Compass is a Sass framework with a predefined collection of best practice tools. One of the many features of Compass is that you can easily write vendor prefix CSS meaning your code is compatible in all browsers.

For example: Creating a div block with rounded corners

The Standard CSS way

Here is the code in standard CSS. Notice that 3 lines are required so this style is compatible on all browsers.


div {
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px;  
}

The Compass way

Here we are calling the compass mixin “border-radius” and setting the border radius to 5px. We can achieve this with only one line of code. Once complied, the Sass output will mirror the standard CSS output.


div {
 @include border-radius(5px);
}

Device testing improvements with Edge Inspect

Gone are the days of building a website just for the desktop. Our designers keep in mind how visitors are now using mobiles and tablets more than ever. Testing on so many devices after development is costly and time consuming. At Revium, Edge Inspect from Adobe has become our default device testing process. This tool enables us to test on desktop, table and smartphones simultaneously during the build process. This is a welcome improvement for our development cycle.

Putting our weapons of Sass production in practice

Revium has implemented Sass for many of our recent projects. We recently applied a solution for our client Alinta Energy. They wanted to reduce the size of their website header without compromising the existing layout. The solution was to reduce the header content when the user scrolls. With the use of Sass along with Compass and Edge Inspect, Revium was able to devise an elegant solution that works perfectly. Alinta Energy were pleased with the result, both in the quality of the outcome and efficiency of delivery.

View the solution here

If you need any assistance with your web project or are interested in more information on Sass, please contact our team at Revium.

You may also like

The Web Is Shifting

With the release of iOS9, Apple slipped in a feature that allows users to install content blockers for mobile web browsers. Along with blocking ads, content blockers will also block cookies and scripts by default. Add-ons for desktop browsers have been growing in popularity so this announcement compounds this issue significantly.

Keep Reading

Responsive Web Design

In most recent times monitors have increased in size and 21 inch monitors and bigger are very common. This allowed web designers to build websites that show more information at a time to the user and to use striking images in their layout.
 

Keep Reading

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.