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

Posted by Craig Watson
Craig Watson
27,930 Points

Using Sass partials to import bootstrap and animate.css?

Hi everyone :)

I am just wondering what others have done in regards to using sass with a framework and or external css file like animate.css.

Previously I had my main.scss file compile only the style I have coded, and still have links in the HMTL Head to the bootstrap.min.css and the animate.css, however now im wondering if I should put these files into partials in the .scss and have them imported at the head of the main complied file?

What your thoughts and opinions on this?

Craig

Craig Watson
Craig Watson
27,930 Points

Thanks guys :)

I use custom bootstrap downloads a lot so being that others are using / considering the partials option I think I will press forwards with that.

I really like the idea of putting in a HTML comment to indicate the use of the framework or stylesheet to!

From what you both seem to be saying I have missed that there is a Sass version of Bootstrap to download? is that correct or have I got the wrong end of the stick?

Craig

PS.

I am still relatively new to web design and development and have been looking to colab using codepen on a dummy project or real project (should you know something you see would fit the idea), to get used to working with other peoples code and interacting with other designer and developers, if you have any ideas or would be interested please let me know :)

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

bootstrap sass

You can download that directly, use one of the install instructions it suggests, or if you use npm just cd to your project's home directory and use the command:

npm install bootstrap-sass

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

That's what I do. Or let grunt concatenate them. And since that'll minify and extract comments from the css, I'll leave a comment in the html crediting any external libraries I used.

Especially with bootstrap, I like to port it in the SASS version, then only import the files I actually use on the site to reduce the file size.

James Lucia
James Lucia
7,350 Points
James Lucia
James Lucia
7,350 Points

Currently, I do what you've done in the past for the framework/normalize/animate; I link to the css in the Head and use the partials for my styles.

However, going forward, I've been planning on using SCSS partials, because I don't typically use the entire [insert framework here] framework, and it would allow me to call just the components of it that I need, rather than having it spit out the ENTIRE framework.