Using Compass/Sass with another CSS framework

综合技术 CSS3 Recipes (源链)

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 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.


Problem courtesy of: Minh.L


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:


  • 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.

Solution courtesy of: Miriam Suzanne


Herman: Automated Pattern Libraries | OddBird Give Your Design System a Home Documentation should be the default option – the path of least resistance for developers. Herman combines document...
Sass Styles In Reactjs application Sass Styles In Reactjs application is today’s leading topic. ReactJS is the most popular front-end javascript libraries among the developers. So toda...
SASS Variables If you have no idea what SASS is, you should readthis article. One of the awesome things about the Sass preprocessor is the ability to use va...
What’s Next? A couple of months into working at Apple it dawned on me that the big question wasn’t whether I could make it at Apple, the big question was “What’...
How do I create SASS mixins and use in all project... I want to create a scss file with different mixins that I want to use in any project by simply using @import "mixinfile" and not to copy that file ...
CSS3 Recipes责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Using Compass/Sass with another CSS framework

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录