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 trialPrzemyslaw Chmiel
13,532 PointsAmpersant 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
8,569 PointsI 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.
Przemyslaw Chmiel
13,532 PointsI 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
11,564 PointsI 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
13,532 PointsSo you whould to say, problem gone away alone, just day after day?
Tomáš Komprs
14,057 PointsHello, 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
5,829 PointsI 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
Front End Web Development Techdegree Graduate 15,909 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;
}
}
Mike Hatch
14,940 PointsMike Hatch
14,940 PointsWow, 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
6,232 PointsChristopher Cudiamat
6,232 Pointsim 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