Converting to SASS

posted


Chris Coyier’s talk at ConvergeSE this year inspired me to finally take the plunge into SASS.

I just spent a little time getting used to it and converted my WordPress theme to use .scss files that get concatenated and compressed into a single .css file.

Instead of just renaming my current file to a .scss file and just letting the build compress it, I decided to plunge a little deeper and split out my styles into multiple files for specific sections.

Here’s a quick rundown of what it took, in case you’re trying to decide whether or not to make the switch:

  1. Create a /scss/ folder inside the themes /css/ folder
  2. Break current .css file into several .scss partials for different sections: _header.scss, _footer.scss, _content.scss, _reset.scss, _fonts.scss, etc. Note: The underscore makes SASS not create a .css version of this file, by the way
  3. Create a theme.scss file that uses the @import rule in SASS to retrieve the .scss partials and concatenate them into one file

That all went smoothly, but I wanted to go a little deeper down the rabbit hole.

Taking it to the next level had some steps of its own:

  1. Set up variables for complicated hex values: I didn’t bother with a variable for #fff or #ccc because they are simple and easy to remember, but #ED1A55 is quite a bit more complicated. To keep with the organizational structure that I already set up, I created a new _colors.scss partial to declare my color variables. I placed the @import rule for the colors at the top of my theme.scss file so that I could use the variables in any of my partials.
  2. Nest some selectors: I went through each file and nested my selectors where it made sense. There were a few places where I intentionally didn’t nest some rules because it would have created a ridiculous and inefficient final selector in the .css file.
  3. Nest the @media rule: Nesting media queries in a selector is one of the best use-cases for SASS and Compass that I can really think of because you can easily keep the media query in context with it’s selector, and not having to copy and paste your selector elsewhere is pretty handy, too.
  4. Make even better nested rules using &: In .scss files, if you use & in a selector, it equates to the current selector. You can use it for something simple and obvious like a pseudo-element like &:hover, but you can also use it further down the selector so if you apply some sort of class to an element via javascript, you can style the current selector in connection with that class using & in your selector. Here’s an example where I used & inside of an @media mix-in:

    .copy {
        line-height: 1.4;
          float: right;
          color: #ccc;
          text-align: right;
          margin-top: 3px;
    
    
    
        @media screen and (max-width: 600px) {
            .mobile & {
                margin-top: 2px;
             }
         }
     }
    

To make all of this easier on myself I installed Scout, which takes care of all the watching and building of my scss files without my needing to do anything, and runs Compass so I can start using some of it’s handy features as I get more used to this whole thing. It’s pretty great. Note: If I were on OSX, I would probably use CodeKit, it looks awesome and comes very highly recommended.

Now, this is my first foray into this whole CSS preprocessor thing, so I’m sure there must be tons of better ways to do the things I did and dozens of improvements to the way I nested and implemented my selectors. That being said, I can’t wait to really learn the best ways to do everything and get even better at it.

Like Chris Coyier said near the end of his talk:

‘I checked out CSS preprocessors, but I didn’t like it so I switched back to CSS.’

Said no one. Ever.

I’m paraphrasing because I don’t remember the exact quote, but that was the gist of it, and I think it seems to hold pretty true.

comments powered by Disqus