CSS is a powerful tool for developers to create websites with greater functionality in a much efficient and effective way. It also provides developers the ability to create innovative web animations and transition effects. However, the recent innovations in web development technologies have evolved CSS to become even more powerful and capable. Some of those innovations are Sass and Compass.
Sass (Syntactically Awesome StylesSheets) is a CSS extension that has been used since 2006. It has proved itself to be a fantastic tool that empowers CSS to do more.
“Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again”. – Sass-lang.com
Compass is an open-source Sass framework that helps Sass writers to write clean and well-formatted style sheets easily and provide even greater efficiency in creating websites.
The help you in the process of creating beautiful and functional website, there are abundant of development tools available online. Here, we have handpicked some of the popular Sass and Compass tools that will surely be helpful in your web development endeavors.
Compass.app can be bought through this resource. Compass is compatible with linux, mac, and pc and even though it uses JRuby, you wouldn’t need to install Ruby environment to use it. Compass.app adds menubar to the interface, allowing designers to easily compile stylesheets without having to use the traditional command line interface. Compass.app has a bult-in web server with support to LiveReload and Compass extensions.
Susy is a Sass framework and a powerful tool that empowers designers to create custom grid layout. Traditional frameworks have limited options when it comes to customizing layout, which is why it is more fun to work with. Susy also offers responsive grids that will allow you to easily add media queries breakpoints and create a one-off site. It also offers a long list of video tutorials for all newbies. Fish through it and learn what you never knew!
This is a lightweight library that is very easy to use and provides support for SASS mixins. It contains vendor prefixes, add-ons, and other functions that help in writing Sass quicker than ever. If you have a handful of favorite apps such as CodeKit, Hammer LiveReload, you can work with Bourbon on them without the need for configuration. These apps support Bourbon and work fabulously with its mixins.
This responsive grid system is truly profound. It works for both fixed and fluid layout built in SCSS, which is a Sass syntax. The grid also manages to keep your markup semantic and works without any “grid_x” classes. Profound grid will also do the calculations for you to make you webpage fit perfectly and precisely into every browser. Responsive, semantic, and precise — is what makes this grid profound.
Here’s a Sass and Compass complier app that will give you cross-platform power — for free. Yes, for free!
The Sass Way is all about learning Sass and Compass with the help of contributors. Currently it has 16 regular contributors that write up how to write CSS the “Sass way”. Apart from guides contributed by the community, the website also cover a range of other resources including news, editorials, and projects to keep you up to date on the Sassy lingo. Choose your level (beginner, intermediate, advanced) and off you go.
This is a GUI application for SASS, Less, Compass, and CoffeeScript. Koala is designed to make web development more efficient. Don’t be fooled by its adorable looks, Koala is an ass-kickin’ app that support multiple languages, projects settings, real-time compilation, error notification during compilations, cross platform compatibility, and more.
Sassaparilla is a super fast way to get started on CSS, SASS, and Compass based projects. Sassaparilla comes with Sassafras, a flexible and responsive grid system that you can easily configure, typeset modules, flexible break points, and super settings.
This is a fabulous tool that works with LESS, Jade, Slim, Stylus, Sass, Markdown, Haml, LiveScript and Coffeescript to make compilation easier. You can check your website across different platforms and browsers, just in case.
Along with support for various languages for complication, Prepros also has the advantage of automatic CSS prefixing, automatic browser refresh, JS concatenation, file mnificaiton, image optimizations, scroll sync, click sync, input sync, souce maps, built in servers, and multiple device support. Although you can download the trial version for free, it will require $30 payment once you’ve covered that time period.