Join Ray Villalobos for an in-depth discussion in this video Analyzing workflow options, part of Responsive CSS with Sass and Compass.
Working with Sass and Compass is a little bit different than working with other tools. Your browsers don't natively understand how to read Sass files. They only know how to work with regular CSS and because of that, the code you write in Sass has to be converted, or also called processed, into regular CSS. There's a lot of different ways to do this, so naturally, different people develop different solutions, or different workflows for working with Sass and Compass. For example, you can purchase the Compass app that for about $10, gives you a graphical user interface, to handle a conversion for you.
Now, hopefully, you're super excited about Grunt, but if you wonder about the catch, well, GruntJS requires that you have no JS installed. That can be a challenging installation. Also, this type of workflow requires that you work with a terminal to install and run Grunt, plus some of it's dependencies. It's not really a big deal, and it's something you should really get used to as a web developer. So, although there is a lot more set up when working with GruntJS, the amount of flexibility and power you get in return. Makes this a great way to manage your project.
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy