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 Compass Basics Getting Started with Compass CSS3 without the Vendor Prefixes

Matthew Schmookler
Matthew Schmookler
8,970 Points
Posted by Matthew Schmookler
Matthew Schmookler
8,970 Points

Getting lost with this compass set-up. The instruction seems to be jumping steps.

I'm following Guil here and between tutorials it seems he is taking some minor yet important steps in the setup process. For example between this tutorial and the previous he now has a new file _page.scss and an import to that page from screen.scss. I've gone ahead and tried to duplicate that process regardless of the lack of explanation, yet I'm not getting the results ie., verndor prefixes imported to _page.scss. I'm also riddled with error messages on my screen.css page. Any suggestions?

2 Answers

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

Have you imported the required compass plugins?

For vendor prefixes you should add the CSS3 plugin in the top of your stylesheet like so:

@import "compass/css3";

Then the vendor prefixes should be automaticaly added when you use a mixin. For example if you use the border-radius mixin: 

.myclass {
@include border-radius(4px);
}

You will get 

.myclass {
-webkit-border-radius: 4px;
-o-border-radius: 4px; 
-moz-border-radius: 4px;
etc.
}
Fran M
Fran M
20,141 Points

from a few videos back he was asking that we create a new pages titled [ _name file.scss ] the project folder only comes with ie.scss, print.scss and screen.scss via ie.css, print.css, screen.css from what I've downloaded.

I think what Mathew is asking is are the other pages from the video titled _layout.scss, _page.scss, _variables.scss and .css are they already suppose to be included in "project file"? I believe the answer is

no, you should be creating files titled _layout, _page, _variables including the css files on your own to be included into "project folder".

Matthew Schmookler
Matthew Schmookler
8,970 Points
Matthew Schmookler
Matthew Schmookler
8,970 Points

Thanks! I seem to be up and running now ok. It just wasn't clear how the _page.scss page that he made outside of the tutorial seemed to be receiving a bunch of the imports. At this point though things are working :)

Thanks again!

Fran M
Fran M
20,141 Points

I completely missed that video noting to download "compass-basics_stage-2" and went back to watch the video and checked to see if there was a download to _page file, etc etc and there is, my mistake.

Download: <br>compass-basics_stage-2</br> to open the files you were referring to, now following along makes more sense. Might want to check each video from here on out to see if there are files to download included from the video.

Hope that make a difference.