Using Compass/Sass with another CSS framework

Question

I recently started using Compass/Sass for my CSS coding and it has been working out well. I am now looking into trying out different frameworks (Skeleton, Foundation, Bootstrap etc.). My question for those who are experienced with using Compass, when you install a new framework, it includes it's own css file with ready-made classes. When you use Compass, it has the scss file you use in order to modify classes and variables. The thing that is confusing me is that I would need to go to the css file to modify any of the default classes, then go back to the scss file in order to do the mixins, variables, etc and it seems really redundant and time consuming.

Should I be cutting everything in the css file and pasting it in the scss file to make it easier? Or is there a different method I should be doing if I want to use a framework such as Bootstrap with Compass?

BTW I also have the compass.app that allows me to do a one-click install for Foundation and Bootstrap. I just found anther framework called Susy and it looks pretty cool too.

Thanks!

Answer 1

Any CSS file is valid scss if you change the extension, so I wouldn't get too caught up in the differences between those files. You can easily use Compass with any framework, and many frameworks have been ported to Compass for even better integration.

On the other hand, I think Compass changes the very idea of what a framework can/should be. CSS frameworks are difficult to maintain and use because CSS isn't built with framework abstraction in mind. The result is bloated, non-semantic API's that try to do everything, but cut corners along the way. You can do better.

Compass is built to facilitate the sharing of smaller, focused 'plugins'. Susy is one of those plugins, and there are many more. You'll notice Susy isn't like Foundation or Bootstrap: it only does grids, and it does them in a way that wouldn't be possible without Sass. That makes a large difference in the API possibilities. The same is true with many other plugins.

I use my own mix of Compass plugins to build a framework custom-suited to my needs. I recommend that you do the same. Don't write all your own code, but do find your favorite plugins to roll your own framework. Mine looks like this:

Always:

• compass
• susy
• modular scale
• breakpoint

As Needed:

• compass-rgbapng
• animate
• solarized (not a plugin, but easy to copy/paste)
• sassy-buttons
• many many more...

You get all the benefits of rapid-development, but much more control and better long-term code.