current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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!

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

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.

share|improve this answer
    
Thanks for that point of view. I realize now I was over thinking when I could just rename the extension and work that way! I am going to try out your process as well to see what works best for me. A lot of the frameworks I have been playing around with are nice, but I feel some of them are overkill with the amount of stuff they include. –  Minh.L Sep 7 '12 at 17:49
    
Could you provide a link to Solarized? –  PHearst Oct 12 '13 at 9:28
    
ethanschoonover.com/solarized –  Eric M Suzanne Oct 13 '13 at 18:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.