Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass

wrote this on in . 27 reactions

About a year ago, I gave the first inkling of wanting to use Sass for a client project. I'd been messing around with it for awhile and it made me feel nice and sassy inside so I wanted to keep seeing what it had to offer. Eventually, I saw the potential power that it could bring to Foundation, so I approached Jonathan about considering the move. At first, we felt like maintaining Foundation 2 as CSS would be the best bet because we were still learning a lot about what a framework was and should be. Nevertheless, I maintained a repo that held a Sass version of Foundation 2 that got some good traction in the community.

We again started looking at it from lots of different angles and decided that we should give it serious thought for Foundation 3. We started pecking away at our keys for a couple weeks and eventually had a working branch on github that was written in pure Scss. From there, we started seeing the power and potential of this new pre-processed framework. We saw Foundation 3 as the perfect stepping stone for people wanting to switch from vanilla CSS to Sass.

But Wouldn't It Be Hard to Learn?

As with learning any new code framework or structure, there will be some growing pains. With tools like CodeKit and LiveReload, we don't need to rely only on the command line; although, the command line is actually simpler than the other tools in my opinion. You can learn how to use it by reading “The Designer's Guide to the OSX Command Prompt ”. Jon was able to understand the basic concept within a couple days. The great thing about using Sass, Scss specifically, is that you can actually write normal CSS and it will compile exactly the same. This gives you the comfort of what you are used to with the sandbox to try out the new tools at your fingertips.

Since Foundation 3 would be maintained and written in Scss, we knew we'd need to get the rest of the team up to speed. We started holding short classes amongst the team to introduce the concepts to everybody and make sure they got it installed and running properly. The initial learning curve varied from person to person, but they all caught on generally fast.

What Do People Say Once They Make the Switch?

We recently put together a quick survey using Google Docs to pass around the office for those that have just started using Sass and to people in the community that have been using Sass for awhile. We came up with a list of five questions that would help us gauge opinions.

1. What scared you the most about taking the leap into Scss?
In general, the responses were all the same. People using vanilla CSS are afraid to jump into the command line and take on the burden of troubleshooting the onboarding process that seemed daunting.

“I was concerned that adding another technology was going to make the development process more complicated or take more work.” Miles Carmany, Web Developer
“The setup seemed a bit onerous, compared to straight CSS or Less. It's still a little choppier, but I think it's worth it.” Jonathan Smiley, Design Lead at ZURB

2. Now that you've taken the leap, would you go back to vanilla CSS?
Unanimously, people said they'd never go back to plain CSS unless it was for a really small project, but maybe not even that.

“No way. The amount of control you get with variables and nesting is awesome. Plus, Compass is really helpful.” Caleb Winters, Designer at ZURB
“Never — gotta have my toppings.” Dan Leatherman, Web Developer at Permalight NYC

3. How long did it take you to feel comfortable using the basics of Scss?
The answers here ranged a bit more, but were still generally fast considering the added value that Sass provides. People said it took between a couple hours to a couple days to feel really comfortable with the basic concepts of Sass.

“Once I got down the installation and setup process it didn't take long for me to pick up the Scss syntax and to start seeing the value of variables and nested elements.”Danielle Polini, Design Contractor at ZURB
“A couple of hours.” Ghaida Zahran, Designer at ZURB

4. What is your favorite part about using Scss?
The winner here was the fact that you can nest selectors. This saves you so much time and wasted characters. People feel like Sass lets them organize their styles better for future iteration and adaptability. The other big win is variables, which can unlock tons of power in your stylesheets.

“Abstracting out browser-proprietary properties, ability to store info in variables.” Tanya Breshears, Design Engineer at AirBnb
“Right now, being able to nest selectors instead of writing out each individual selector is my favorite. It's a huge time saver.” Caleb Winters, Designer at ZURB
“Keeping my code organized in a way I want to for development and then have it output in the most efficient way for the browser.” Miles Carmany, Web Developer

5. What do you see as the biggest advantage of using a pre-processor like Scss?
People love the fact that they can organize and maintains their CSS much more efficiently and ultimately save time in their entire development process.

“Easy iteration. For people who want to continue to work on and improve their products, it makes changing things and refining styles a breeze.” Anonymous
“Maintainability and reusability.” Jared Hardy, Product Design at Groupon
“It streamlines the whole process, and is easier to read and debug. It takes only a few minutes to set up but the time savings are immense.” Ghaida Zahran, designer at ZURB

People seem to be really happy once they make the leap. Since switching Foundation over to Sass, we've been able to switfly make changes and plan for really powerful future releases. Using tools like Sass or LESS will only help us get ready and force a future that is on its way. Vanilla CSS is sloppy and tedious in nature and the more people using pre-processors, the more pressure is on the W3C working group for CSS. As with anything, the fear of the unknown can be really strong. Stop fearing and start Sassing today! Take some insights from your peers and give it a go.

Image03
Swing and a Miss
Image00
You're Design Thinking Too Much
Design pot
Design or Get Off the Pot