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

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.