I had read a lot about LESS and Sass and the concepts of CSS pre-processors, and even dabbled with how they worked, but didn't fully understand how powerful they could be in my daily development workflow.
When I started at HubSpot I was tasked with starting the team that manages the HubSpot portfolio of websites from design, development, and general project management needs surrounding them.
The Interactive Content team manages mulitple sites, as we've grown our dedicated web team we've added some awesome people (Shoutout the current and past members of the Product Marketing Interactive Content team! Ben Lodge, Matt Lawson, Laura Marelic, Gabriela Lanza, and soon Stephanie Lee).
Without diving to deep, here are some quick datapoints on these sites:Managing this portfolio of sites with those numbers is a daunting task. Fortunately the new HubSpot COS is a big step ahead of the Legacy HubSpot CMS platform, but dealing with thousands of pages is never easy no matter what platfom you are.
With the help of two Senior Product Engineers (Tim Finley and Adam Schwartz) the team architected a Git repository where all the Sass and Coffeescript is committed and versioned allowing us to meet the demanding needs of the marketing team at HubSpot.
So here are my 5 reasons for really loving Sass and why it is now crucial for my development workflow.
When you have thousands of pages in a large scale site or app, Sass is especially helpful in helping reduce the stress of such large scale. Even if you aren't dealing with a large scale website, Sass is still a powerful weapon to have for building a small scale style guide. Being ready for growth is always a good thing!
A big part of the scaling solution for us is the version control we get with Sass in our infrastructure. At a high level, every file we commit to GitHub is automatically queued up in Jenkins to be compiled and written to Amazon S3. This allows us the flexibility to push out new code at a moments notice while we do QA testing to make sure it won't break anything.
This is a pretty simple feature, yet it is incredible powerful when working with a large scale website. By creating variables you can easily pull them over and over to help create consistency with colors, sizes, etc... If you need to change the color of multiple elements, simply update the variable and voila it reflects in all those places.
Having you code organized and commented well save you and others a lot of headache over time. With Sass you can separate out all of your different sections to different files and compile them at runtime. This saves you the headache of having one monster CSS file over time. Even if you don't have a large complex site, just being able to break up your simple style guide to different sections makes life much easier.
Another nifty little tidbit that I particularly like, when you put all your comments in Sass, when it compiles to CSS at runtime it doesn't bring over the comments into my clean minified CSS file. The larger the scale of your site the more size matters, but as a best practice keeping your stylesheets lean and clean is the way to go.
With traditional CSS imports you have the waterfall effect of all the CSS files you declare load one at a time. In this way every single CSS file is a separate request and this increases the server/browser load time with the increased requests. No one likes slow load times. With Sass being a preprocessor, it pulls all those includes first and only delivers the single compiled version at runtime. This is huge a huge win!
Mixins are essentially a way to create reusable blocks of code. A good example of a simple mixin would be a form button, you can create all the standard attributes and simply mixin the colors anywhere you want to make a variation.
All in all, Sass has become a necessary part of my development workflow. The speed and agility that is gained by all of those above categories is crucial to us being able to ship updates regularly to all of the HubSpot websites.
Last but not least, Sass extensions. Even on it's own, Sass is very powerful, but with the addition of custom extensions it becomes even more of a powerhouse. I use a great deal of small extensions in my workflow, but here are two of my favorites.
Compass helps Sass authors write smarter stylesheets and empowers a community of designers and developers to create and share powerful frameworks. Put simply, Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. A simple example of using Compass is below, instead of writing out all the vendor prefixes for a border-radius, Compass can compile them for us.
Put simply, Breakpoint makes writing media queries in Sass super simple. I combine the use of Breakpoint with variables to build standard breakpoints that I know i'll typically need to build media queries around. Below is an example of how quick i'm able to do that!
Do you have any questions or comments (positive or negative!) about this article? Don't be shy, I'd love to hear from you, ping me on Twitter.
Tweet @Simpson