All articles

Taking the plunge: fitting Sass into our workflow

November 4, 2016 by
Taking the plunge: fitting Sass into our workflow

For a few years now there has been a push toward making front end development easier. Frameworks and preprocessors such as Bootstrap, LESS, Sass & Foundation have been gaining in popularity. At Pugh Morgan we have moved to incorporated Sass into our workflow. Sass is a CSS preprocessor, meaning that it is a code that is translated to CSS. It is open-source and coded in Ruby, but you don’t need to know too much about Ruby to use Sass. Sass has two syntaxes, the older indented syntax, and the newer SCSS. SCSS looks a bit more like regular CSS in that it uses braces and semi-colons in a similar way.

I was sceptical about Sass/SCSS, for a long time I couldn’t see the point of taking the time of learning a new type of CSS, when I was coding quickly and neatly in the regular way. There was also the Sass vs LESS argument, and should I be learning to develop in both, just one, or any at all. Being sceptical about something based on blogs or how it might work isn’t a logical place to be, so after some consideration I decided to give Sass a chance, and learn how it can be a help. Our new Pugh Morgan website is in development, so it gives us a good chance to learn a few new tricks.

It didn’t take long to throw my scepticism out the window. It is simple to set it all up, read the documentation on the Sass website and get programming. One thing to note is that Mac’s come with Ruby pre-installed, but on Windows you’ll need to install it. I use the command line to install and use Sass, for me it is easier than learning to use the apps. Using a Ruby Gem you can install Sass, and to have the compiler to work as you make changes just run a “sass –watch” command.

There are five main reasons why I was so quick to form a favourable opinion on Sass:

Ease of use
It only took a day of working with Sass to get my head around it, and perhaps three days to really get the feeling that I was using it to my advantage.

Code format
This is something I love. SCSS allows the programmer to code the stylesheet in a similar format to how the HTML is written. If you are like me, and love neatly indented HTML code, then you’ll love the way SCSS works. When I am front-end coding for a large site, the CSS can start off quite neatly, but after a few rounds of client changes or UI updates it can start to look a little messy.

SCSS helps in this regard by allowing the nesting of styles and keeps each section separate, for example, all header styles can sit within the header brace, eliminating the need for specific classes or making a change that might have unwanted affects in other parts of the site.

Variables
Such an important part of so many programming languages, Sass gives us the ability to set variables at the start of a document and refer to them throughout which saves us from referring to previous classes to check for consistency. We can set a variable such as “$letter-spacing: 0.2em;” and then refer to it within a class with “letter-spacing: $letter-spacing;”. If the UI needs to be updated, we only need to change the variable and the compiler will update all instances.

Mixins
Amazing! This would be my favourite part of Sass. A mixin allows a reused piece of CSS to be defined and then inserted into the SCSS, while leaving the values to be inserted per use. A simple example is a mixin that I use for a CSS transform. The mixin is defined in an external mixin document like this:

@mixin translate($value1,$value2) {
-webkit-transform: translate( $value1, $value2);
-moz-transform: translate( $value1, $value2);
-ms-transform: translate( $value1, $value2);
-o-transform: translate( $value1, $value2);
transform: translate( $value1, $value2);
}

Then we add it to the SCSS document like this:

@include translate(-50%,-30%);

This translates to a cross-browser translate CSS statement without having to type out all the options. The more you use these mixins, the more you love them. I am currently using mixins for font styling, animations, opacity, positioning and a few more.

Community
The heart of open-source. It always astounds me how many developers out there that are willing to help others out, or create code for sharing. This community is better than any university, learning institution or course out there, and it is important to thank them all for all the help they give. The sharing of mixins is a particularly helpful, taking the time to understand what members of the community are giving you really accelerates the learning process.


I’m happy I’ve taken the plunge and took some time to learn Sass. I think it has already demonstrated that it can help us develop the front-end of a site quickly with more consistency and where it will really shine is during collaboration and in future updates.