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 CSS to Sass Refactoring with Sass Placeholder Selectors

Posted by Jed Llenado
Jed Llenado
8,995 Points

Placeholder won't allow extending on partials.

Hi,

I'm stuck even I followed the videos twice already. I'm getting the error that is shown below:

Syntax error: Invalid CSS after " @extend ": expected selector_sequence, was "%centered;"

on line 2 of scss/layout/_header.scss
from line 5 of scss/layout/_index.scss
from line 6 of scss/application.scss



1. .main-header {
2.   @extend %centered;
3.   padding-top: 170px;
4.   height: 850px;
5.   background: linear-gradient(#ffa949, transparent 90%),
6.              linear-gradient(0deg, #fff, transparent),
7.              #ffa949 url('../img/mountains.jpg') no-repeat center;
8.   background-size: cover;
9. }

_extends.css:

 // Center text

%centered {
 text-align: center;
}

// Top border
%t-border {
  border-top: 2px solid $color-border-light;
}

// Containers
%content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

// Columns
%columns {
  width: 46.5%;
}

// Clearfix
%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

The styles didn't apply as it showed : http://screencast.com/t/2drHfWhG0 I tried to use the project files, but still the browser shows the same error.

FYI: I got SASS installed in v3.4.18

What could be the possible reason why it won't compile correctly?

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Hi Jed, Could you also post your _extends.scss file?

4 Answers

Will Kesling
Will Kesling
6,237 Points
Will Kesling
Will Kesling
6,237 Points

I had the same problem and then I realized that my application.css was missing the @import 'layout/extends' which is why I was getting my error:

The selector "%centered" was not found

Julianna Kahn
Julianna Kahn
20,702 Points
Julianna Kahn
Julianna Kahn
20,702 Points

Yes, that is what was happening to me. Thank you for explaining what went wrong.

Chris James
Chris James
19,102 Points
Chris James
Chris James
19,102 Points

This is how @extend works in sass (straight from the sass docs):

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

In your code, %centered isn't a valid selector. In your partials, do you have a #centered or .centered? If you do, change your extend to use that.

Jed Llenado
Jed Llenado
8,995 Points

Thanks Chris. I appreciate your reply. I got your point. Sorry if my description above is a bit misleading.

From the video tutorial the placeholders are added at _extends .scss partial of layout directory. Basically, I'll just have to extend that placeholder; that's the error, @extend %centered; won't work. :(

The place holder is written on _extends.scss as:

%centered {
   text-align: center;
}

I was using hostgator yesterday while practicing Sass and I found out that the gem module installed by default is outdated, Sass 3.1.20 (Brainy Betty).

I tried trying it out locally, I used ruby console (windows) and see if its okay on latest version of Sasss. It seems all things are good at the updated version. No problem at all.

Tried to install and uninstall new Sass gem using SSH on the hostgator server, still wouldn't work for even if I do that, the version the server is using is still 3.1.20.

I believe the error is coming from that old version. :(

I already raised a support ticket yesterday requesting to update Sass to the hosting provider but it seems they couldn't update it.

Fortunately, I can still use my local machine to practice since I have to move forward. It could be better if its on the actual server, though.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Actually, this is incorrect information. Although you can extend ids and classes, it is recommended that you extend silent selectors that are designated with a percent sign. %centered is indeed a valid silent selector in Sass. The advantage of using silent selectors is that they only exist in your CSS once, when you call them. Extending an id or class often causes Sass to compile unnecessarily complex and heavy CSS.

Chris James
Chris James
19,102 Points
Chris James
Chris James
19,102 Points

My bad.

Jed - glad you worked out where your issue came from.