Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Compass Basics Getting Started with Compass CSS3 without the Vendor Prefixes

Posted by Ivan Pautov
Ivan Pautov
2,574 Points

CSS3 without the Vendor Prefixes. Problems with compass :(

Hey guys. I've got some problem with compass lesson I've just started to learn. I can't actually understand the way how Guil after the code bellow gets pretty nice bunch of vendor prefixes inner his _page.scss file.

//Resets @import "compass/reset"; - simple reset of default styles @import "compass/css3"; - logically, that feature helps us to connect with different CSS3 mixin properties

//Partials @import "page"; - here Guil imports the rules (what rules? That file should be empty, right? Or Guil just didn't show us that he put there prefixes before?)

Thanks all for your response, have a good day!

Fran M
Fran M
20,141 Points 
PAGE STYLES from Compass Basic Stage 2

$link-txt: white;
$link-bg: #3f8abf;

@mixin mobley {
    @media (min-width: 0) and (max-width: 768px) {
        padding-right: 8%;
        padding-left: 8%;
    }
    @media (min-width: 769px) {
        padding-left: 25%;
        padding-right: 25%;
    }
}
* {
    @include box-sizing(border-box);
}
body {
    color: #222;
    background-color: #edeff0;
}
.main-content {
    padding-top: 48px;
    padding-bottom: 10%;
    @include mobley;
}
.main-header {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #384047;
    @include mobley;
}
%head-links {
    display: block;
    color: $link-txt;
    text-align: center;
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-logo {
    background-color: #3ac162;
    @extend %head-links;
    @include single-text-shadow(rgba(0,0,0,.3), 0, 1px, 0);
}
.main-nav {
    a {
        background-color: $link-bg;
        @extend %head-links;
    }
    li {
        @media (min-width: 0) and (max-width: 768px) {
            margin-top: 12px;
        }
    }
}
.main-footer {
    font-size: .85em;
    padding: 2.5em 0;
    text-align: center;
    background-color: #b7c0c7;
}

Above is what CBStage-2 style page should look like. Depending on what file you've downloaded or are working on _page.scss from CBS-2 file folder wont adhere to _page.scss CBS-1 or CBS-3 file folder without manually adding in codes or replacing pages to the correct assignment your working on. So, far from where I am now at there have been three project files

1 .) compass-basics_stage-1 2.) compass-basics_stage-2 3.) compass-basics_stage-3 included in the file is the video number to track which stages your on.

Hope that helps, it's best to check each video to see if Gail included project files that you may have missed downloading.