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 Sass Basics Improve Your Workflow with Sass Use the Ampersand to Reference Parent Selectors

Posted by Przemyslaw Chmiel
Przemyslaw Chmiel
13,532 Points

Ampersant dosent work btn with -callout and -info.

.btn { color: $white; display: inline-block; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 0.75em 1.5em; border-radius: 0.35em; &-callout { font-size:1.2em; background-color: $color-secondary; } &-info { font-size: 0.85em; background-color: $color-primary;
margin-top: auto; } }

This is my code, look same like code from video, but dosent work on my pc. What im doing wrong, im using ScoutApp for converting sass. Others thinks work perfect.

I got that answer:

Syntax error: Invalid CSS after " &": expected "{", was "-callout{"

          "-callout" may only be used at the beginning of a selector.

6 Answers

jameso
jameso
8,569 Points
jameso
jameso
8,569 Points

I couldn't find anything in the official Sass documentation, but I suspect this video is slightly outdated, and you should now use a ' . ' instead of a ' - ' in between the selector:

&-info try &.info,

&-callout try &.callout.

Afterall the ampersand is simply a Sass selector for the parent element, in plain CSS it would be: .btn .callout

If you check this tutorial, they use this same syntax (btw css-tricks is an amazing site for learning CSS if you haven't checked it out already):

https://css-tricks.com/the-sass-ampersand/

Hopefully this works.

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

Wow, thanks. This course isn't even that old and this module is proving to be problematic and frustrating. Technology was one step ahead when they created the course I guess. Can't get a whole lot to work. June 26, 2018.

Christopher Cudiamat
Christopher Cudiamat
6,232 Points
Christopher Cudiamat
Christopher Cudiamat
6,232 Points

im quite confused here?? you said in CSS it would be .btn .callout..hence we should use . instead of - .But what we are trying to target is something like this .btn .btn-callout.? so to me &.callout doesnt work in my code

Przemyslaw Chmiel
Przemyslaw Chmiel
13,532 Points
Przemyslaw Chmiel
Przemyslaw Chmiel
13,532 Points

I check that site few days ago, its really amazing. I try that method with you suggest but its doesn't work... i dont know what is wrong, but anyway my code work but without &.. and some trick with can make our codes quick.

Thanks for your answer!

Cameron O'Brien
Cameron O'Brien
11,564 Points
Cameron O'Brien
Cameron O'Brien
11,564 Points

I was getting an error too, it was when my nested "-&callout" and "&-info" declarations were empty and then after adding my properties, it seems to be working now, which is weird. 

.btn {
  color: $white;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;  
  &-callout {
    font-size: 1.1em;
    background-color: $color-secondary;
  }
  &-info {
    font-size: 0.85em;
    background-color: $color-primary;  
    margin-top: auto;
  }
}
Przemyslaw Chmiel
Przemyslaw Chmiel
13,532 Points

So you whould to say, problem gone away alone, just day after day?

Tomáš Komprs
Tomáš Komprs
14,057 Points
Tomáš Komprs
Tomáš Komprs
14,057 Points

Hello, I have the same problem right now. But I tried this in my editor and work well. SO I just delete this part and copy back and is working :-D don't understand why :-D Some issue with workspace probably. In the next Video, I have the same problem with @mixin. Tried to delete, paste back and just work! :-D

rnorton
rnorton
5,829 Points
rnorton
rnorton
5,829 Points

I was having the same issue until I realized I'd left the workspace open too long and had to refresh it - which stopped the watch. My issue was resolved once I input the watch command in the console again.

Karina Rogers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Karina Rogers
Front End Web Development Techdegree Graduate 15,908 Points
Karina Rogers
.a{fill-rule:evenodd;}techdegree seal-36
Karina Rogers
Front End Web Development Techdegree Graduate 15,908 Points

&-info Fixed: For some reason my workspace had .card on line 114. After saving my .scss file, I viewed my .css file and both my '.btn-callout' and '.btn-info' were actually '.card .btn-callout' and '.card .btn-info'. I deleted the .card selector in my scss file and now my code is working:

.btn { color: $white; display: inline-block; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 0.75em 1.5em; border-radius: 0.35em; &-callout { font-size: 1.2em; background-color: $color-secondary; } &-info { font-size: 0.85em; background-color: $color-primary;
margin-top: auto; } }