I have been using SASS with compass for a while now with my projects to help speed and organize my CSS. I am currently working on a project that uses several jQuery UI widgets. For those of you who have used these widgets, it comes a no surprise that both javascript and CSS are required for the look and feel. If there is a need for different styles on certain pages, SASS makes this very easy.

  • First, download all the necessary file from  the jQuery UI site.
  • Next create a SASS partial, for example “_mytabs.scss” and place the css that you downloaded there.
  • wrap the all of the CSS with the class or id of the HTML that you will use the jQuery UI for. For example, I am using a class name of speakertabs so I wrap
    1
    2
    
    .speakertabs {
    }

    around the block of CSS code that I pasted into my partial.

  • jQuery UI will typically append additional classes to the HTML used for the jQuery UI call.  So, any of these classes that are styled by the CSS added to your partial will need an  “&” before the class name so that the final CSS is generated correctly. As an example, “.ui-tabs” is appended when using jQuery UI tabs. So my code becomes
    1
    2
    3
    
    &.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    ...
    }
  • Be sure to import your partial into your main .scss file using
    1
    
    @import "mytabs";

Of course, you can make the CSS you place into a partial more SASS-like with nesting and extends but the above is a quick way to generate unique styles for your project.