My introduction to SASS (Syntactically Awesome Stylesheets) started with the Mobify platform, where I was introduced to SASS, Kaffeine, Dust JS and Git in mass amounts. At first, I was reluctant to use SASS – it just seemed like more work and a heck of a lot of setup. I was also confused about the whole pre-processor and how that would work with a webserver, etc. For the mobify projects, SASS is built right into the workflow – as you code your files, Compass watches those folders and compiles the SASS files down into CSS files, its Magical!

Currently, Im using LiveReload in combination with MAMP to work locally on my machine using SASS, it’s been working out really well. I have also tried Compass.app, which is another alternative but it doesn’t offer a robust LiveReload option, which is a big benefit.

Since my introduction, I have been singing high praise of SASS and integrating this workflow into all of my projects including most recently my WordPress blogs. It hasn’t yet made it’s way onto onerutter.com – but Im working on a blog redesign for my wife where its heavily used.

There are 5 main reasons why Im loving SASS:

  1. Organization – I love writing beautiful, elegant code! SASS allows me to organize my website’s CSS into a clean structure made up separate .SCSS files that compile into one master CSS file.
  2. Comments – You can add JavaScript style comments ‘// Default Colors’ into your SASS files to help keep yourself organized. When the files are compiled, you can opt to have all comments stripped from the files. It’s so helpful in ensuring everything is documented.
  3. Imports – Traditionally, when you use @imports in CSS – it’s another server hit as each additional CSS file that is included is a separate request on the web server/client browser, which can cause performance issues. When using the @import statement in SASS, since it’s preprocessed – the imports dont have the same impact. The CSS file is compiled before it is uploaded to the server. LOVE THIS!!
    [css]
    @import "modules/_defaults";
    @import "modules/_structure";
    @import "modules/_header";
    @import "modules/_footer";
    [/css]
  4. Mixins – Mixins allow you to create re-usable code, so for example you can create a button mixin with default styling, then include that mixin wherever you need a button styled. It’s really promotes DRY.
    [css]
    @mixin button {
    display:block;
    padding:8px 6px;
    border:1px solid #1a1a1a;
    color:#fff;
    background: #003F74;
    font-size:13px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight:600;
    text-align:center;
    text-transform:uppercase;
    @include border-radius(4px, 4px);
    @include background-clip(padding-box);
    @include single-box-shadow(rgba(255,255,255,.3), 0, 1px, 0, 0, inset);
    }

    .button {
    @include button;
    }
    [/css]

  5. Variables – This is one of the best features, it allows you to setup variables and include those variables in different styles throughout the stylesheet. It’s perfect for font declarations, colors, etc. It makes it much easier to manage – if you need to change a font/color – you just need to update the variable. I love this feature!
    [css]
    $color-purple: #37004a;
    $color-green: #ce4dd6;

    // Body Text
    $color-bodytext:#707070;

    // Category Colors
    $color-candy:#f58426;

    // Typekit Fonts
    $font-museo-sans:"museo-sans-1","museo-sans-2", sans-serif;
    $font-museo:"museo-1","museo-2", sans;

    font-family:$font-museo;
    background:$color-purple;
    [/css]

Im looking forward to working on more projects where we can make a big impact on the organization of the code by using SASS. I haven’t worked with LESS at this point, but so far SASS has been great so havent had the need.

Categories: CSSSASS

0 thoughts on “5 reasons I love SASS – The Future of CSS and Stylesheets”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

CSS

@font-face and CSS3 Solution

I feel like I have been waiting for support for @font-face for years now. How many times have you had to make an image because a client wanted a specific type-face or have you had Read more…

CSS

CSS Grid Frameworks – The What/When/Why/How

CSS Grid Frameworks such as Blueprint and 960 Grid System have been getting more popular. I recently download a wordpress theme that was built with 960gs and I was delighted with how easy it was Read more…

CSS

Beautiful Cascading Stylesheets

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, Read more…