I had several people reach out after last week’s podcast about LESS and SASS. They were interested in trying it, but already had large existing projects. This is a walkthrough of how to integrate SASS into an existing project without a ton of work, and still leaving you a chance to back out of it later if you decide you don’t like it.
The 10 Minute Trial Run
0. Assumptions
- You’re editing a single CSS file, style.css. If not that’s fine, too.
- Your style.css is broken up into different sections for different pages/templates on your site.
- You have actual work to do and don’t want to just sit around playing with SASS for fun.
1. Backup Your Main CSS
Hopefully you’re using version control like git or SVN, but if not, you’ll want to create a backup of your style.css file. I don’t want to destroy anyone’s work and not be able to get back!
2. Download Koala
Koala is a free SASS/LESS compiler that runs on Windows, Linux, and Mac. It’s not a text editor! You’ll still be editing in your regular text editor, but you’ll be telling Koala to watch your files and automatically compile the SASS files for you. Basically, it allows you to use SASS without installing anything else or using the command line.
3. Rename Your CSS file
Rename your style.css file to style.scss This will allow Koala to know that it’s a SASS file.
4. Open Project in Koala
Drag your project folder onto Koala and it should find and automatically identify your style.scss file. If so, that means it’s watching and ready to auto-translate your SASS to CSS. At this point, you’re ready to go nuts with SASS. However, I’ll walk through a simple change or two that will get you comfortable.
5. Style Away
On the podcast I said that you don’t need to re-work everything you’ve already got. That’s the beauty here: You can add SASS in small pieces or bit-by-bit without rewriting your entire project. For this example, let’s assume you’re editing an e-commerce site and you want to change the size of the images on the product page. Your CSS might look like this:
/***************
* Overall Format and Layout
***************/
.blah-blah-blah {
}
/***************
* Header
***************/
.more-styles-here {
}
/***************
* Product Page
***************/
.product-page .image-list img {
width: 50px;
height: 50px;
}
.product-page .image-list img.active {
width: 100px;
height: 100px;
}
/***************
* Footer
***************/
.some-footer-styling-here {
}
Now we’re going to update the styles on the product page. So the first thing we do is pull out the project page styles and replace them with an import. So, your style.css will look like this:
/***************
* Overall Format and Layout
***************/
.blah-blah-blah {
}
/***************
* Header
***************/
.more-styles-here {
}
@import 'product_page';
/***************
* Footer
***************/
.some-footer-styling-here {
}
And then we edit the project styles to be more SASS-y. Create a file (in the same folder) called product_page.scss with the following:
$small-size: 50px;
$active-size: 100px;
.product-page {
.image-list img {
width: $small-size;
height: $small-size;
&.active {
width: $active-size;
height: $active-size;
}
}
}
Voila! We’ve started working with SASS, specifically file splitting, nesting, and variables. Plus, we didn’t have to rework our entire project styles. Now we can continue playing with it on the product page without interfering with anything else. And, if you’re paying attention, Koala is automatically translating (ie. “compiling”) our files into regular old CSS. There should be a style.css file that is automatically generated each time you save one of your files. (Note: It’s also generating a product_page.css but that’s kind of a by-product. Just ignore it for now.)
6. Play For a While
Hopefully you’re already convinced that SASS is the best thing ever. If not, just play around with it a bit while you’re doing your actual day-to-day work. Give yourself a few days to really try it out. If, at the end of that you still don’t like it, it will be fairly easy to unwind all your SASS into regular CSS, or just restore your old backup CSS to its original state.
However, if you do find that you really like SASS and want to use it long-term, then it’s time to look into fully integrating it into your workflow. Koala is a good way to dip your toes, but for the long term you will probably want to either use the command-line tools or see if there are any plugins or enhancements for your text editor of choice.
I hope this helps you get started! Welcome to the “Future of the Web” club!
