I am a front-end developer working with Sass, HTML, and JavaScript. I have over 8 years professional experience and am passionate about responsive development, modular coding, and object oriented CSS.

Cathy's articles

  1. 8 Tips to Help You Get the Best out of Sass

    Sass creates Syntactically Awesome Style sheets, or at least thats what it is supposed to do.

    When used effectively, Sass helps to build scalable and DRY CSS. When used incorrectly however, Sass can actually increase file size and add unnecessary or duplicate code.

    Below is a series of hints and tips to help you get the best out of Sass…

    1. Structure Your Sass

    Getting your site structure correct from the beginning is vital for any new Sass project. Using partials allows you to break the CSS up into smaller more manageable blocks of code that are easier to maintain and develop.

    Partial files are created using an underscore and are not output as separate CSS files. Each partial should be imported using a master Sass file (global.scss) in the root of the Sass folder.

    For example, here’s a sample folder structure to demonstrate this:

    [code language="sass"]
    vendor/
    base/
    |
    |-- _variables.scss
    |-- _mixins.scss
    |-- _placeholders.scss

    framework/
    modules/
    global.scss
    [/code]

    This folder structure ensures the site is easy to work with, and add to. For example, new modules can easily be added to the module folder and then added to global.scss using @import.

    To demonstrate, here’s a sample global.scss file: