Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Speeding up Workflow with Sass Working with Sass Libraries

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
Posted by SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

UI Design Frameworks and Sass Libraries simultaneously

¿Can I use both a UI design library like Foundation and a Sass Library like Compass simultaneously without causing any conflict?

Thanks!

1 Answer

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Sergio;

Yes, I do it often. Perhaps I'm wrong in doing so, but I find that it is one of the beautiful things of the Cascade portion of CSS.

I am guessing that you are thinking of doing something like:

<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="theme.css">  <!-- Generated by Compass SCSS -->

Is that correct? If that is indeed the case, if there are site specific overrides to Foundation you would like to do you can make them in theme.css.

Hope it helps,

Ken

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Wow thank you for your fast answer. I'm still learning about compass so I don't totally understand your answer, but I guess that you are stating that whatever happens in the foundation.css stylesheet will be overwritten by whatever you write with compass in the theme.css doc (in the case you write rules for the same selector).

I will end the compass course soon so I will get back to you if I'm still confused.

Thanks!

Sergio

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Sergio;

That is correct! If the foundation.css has a foo selector that you want to modify in your Compass SASS file (which gets converted to CSS, right?) you can "override" it in your theme.css file, in the above example. You can also, of course, define our own selectors in theme.css that will be used outside of foundation.css (or whatever other CSS Framework you may choose).

Ken