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

Posted by Nicola Sansom
Nicola Sansom
1,306 Points

Is it best practice to put extends at the top when you are importing a number of different scss files?

So I am following the css to scss course and I was having trouble with some styles being overridden, there was two columns which were floated next to change other when it reached 768px it was supposed change to width:100% and float:none however the width:100% was being overridden by %columns { width: 46.5%; in the extend.scss file, moving the extends.scss to the top seems to fix this but I not sure if it was the right things to do.

Regards Nicola

1 Answer

Sascha Bratton
Sascha Bratton
3,671 Points
Sascha Bratton
Sascha Bratton
3,671 Points

I think your confusion might be because when you @extend a %placeholder element, the element you add the @extend to will show up in the position of the %placeholder element within your stylesheet.

Nicola Sansom
Nicola Sansom
1,306 Points

I don't think added a @extend within a %placeholder. The placeholder was: %columns { width: 46.5%;} I then added this to a class via @extend %columns; and then below that @media #{$brk-narrow} { width: 100%; float: none; }

the width:100% was not being applied until I moved extend.scss to the top to be imported first in the _index.scss folder

Sascha Bratton
Sascha Bratton
3,671 Points
Sascha Bratton
Sascha Bratton
3,671 Points

You misunderstand me.

When you use @extend %placeholder; inside an actual element, the actual element where you have applied the @extend shows up in the stylesheet in the position where the %placeholder element is in your Sass file.

Sascha Bratton
Sascha Bratton
3,671 Points
Sascha Bratton
Sascha Bratton
3,671 Points

Here's an example:

.element {
  @extend %placeholder;
}

.element {
  width: 100%;
}

%placeholder {
  width: 45.6%;
}

In this case, the second .element is not going to overwrite the first .element because the first .element will actually show up in the stylesheet in the position of %placeholder which is below the second .element.

Nicola Sansom
Nicola Sansom
1,306 Points

I see what you mean now thank you in the end I put %columns { width: 46.5%; @media #{$brk-narrow} { width: 100%; float: none; } } within the placeholder and applied the @extend %columns; on the two classes which had float:left and float:right underneath.