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 Compass Layout and Typography Multi-Column Layout

Manu Santana
Manu Santana
8,329 Points

.SCSS file compiles with error (or I don't know really doing well).

When I put in "_layout.scss" this one:

.main-content {
    @media (min-width: 769px) {
        @include column-count(3);
        @include column-gap(3em);
        @include column-rule(1px solid #ccc);
        h2, h3 {
            @include column-span(all);
        }
    }
}

In my .css file exits this:

media (min-width: 769px) {
  /* line 28, ../sass/_layout.scss */
  .main-content, .main-header {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 3em;
    -webkit-column-gap: 3em;
    column-gap: 3em;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
  }

So I don't know because appear the ".main-header" when I'm calling only the "main-content".

Thank you in advance. Sorry by my english :)

5 Answers

Wayne Priestley
Wayne Priestley
19,567 Points

Hey Manu,

This maybe your problem.

.main-header {
    @extend .main-content;
    background-color: #384047;
}

One other thing I noticed, you have a % here.

%head-links {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 5px;
}

Hope this helps.

Wayne Priestley
Wayne Priestley
19,567 Points

Hey Manu,

Thats interesting,

Could you post more of your html and Scss please.
Or create a Codepen and link to it please.

Thanks

Manu Santana
Manu Santana
8,329 Points

Hi Wayne,

I paste the site here https://copy.com/Xo22RBrNyhIO7KYX Really I don't understand because I've checked and I think nothing is different. Thank you in advance and happy new year :)

Manu Santana
Manu Santana
8,329 Points

Hi everyone,

I found the problem. In the "_page.scss" it was an extend of .main-header above .main-content like this: .main-content { padding: 20px 40px 20px 40px; } .main-header { @extend .main-content; background-color: #384047; }

So I think "main-header" had all styles of "main-content". Thank you Wayne.

Caesar Bell
Caesar Bell
24,501 Points

If you are looking to have your _layout.scss file compiled into your css you need to make sure to @import your _layout.scss file as well. Your _layout.scss file looks good

.main-content {
    @media (min-width: 769px) {
        @include column-count(3);
        @include column-gap(3em);
        @include column-rule(1px solid #ccc);
        h2, h3 {
            @include column-span(all);
        }
    }
}

and if your are following the compass class then you should have a file called screen.scss which looks similar to this

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

// Compass Modules 
@import "compass/reset"; 
@import "compass/css3"; 
@import "compass/support";
@import "compass/layout"; 
@import "compass/utilities"; 



// Partials "I created a partials directory so that is why I am using "partials/_filename"
// This is importing the _layout.scss file which would allow your css to render correctly
@import "partials/_global-variables.scss"; 
@import "partials/_page.scss"; 
@import "partials/_layout.scss" 

Your css output should look like this

@media (min-width: 769px) {
  /* line 25, ../sass/partials/_layout.scss */
  .main-content {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 3em;
    -webkit-column-gap: 3em;
    column-gap: 3em;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
  }

I hope this helps.