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

Manu Santana
Manu Santana
8,329 Points
Posted by 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,579 Points
Wayne Priestley
Wayne Priestley
19,579 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,579 Points
Wayne Priestley
Wayne Priestley
19,579 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
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
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,827 Points
Caesar Bell
Caesar Bell
24,827 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.