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

Development Tools

Ryan Hellerud
Ryan Hellerud
3,635 Points
Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

text-shadow property causing my sass to error out

Hey Guys, good tidings to all!

My question today is in regards to using the text shadow property in my Sass files. I keep getting error scss/app.scss (Line 47: Invalid CSS after "...ext-shadow:none": expected "{", was ";")

but the text-shadow will work other places, just not some places. It seems really random. Is there a special setting or property for text-shadows that make it only work sometimes or is there something else going on?

.section2{
    background: linear-gradient(to bottom, #f2f2f2, dodgerblue);
  p{
    color:white;
    text-shadow: black 0px 0px 2px;
  }
 .p1{
    color:black
    text-shadow:none;
  }
  a{
    color:red;
      &:hover{
       color: lighten(red,15%);
      }
  }

shadow will work on p but not p1 and also it wasnt working on my h1 & h3 tag, it was giving me a similar error.

Edit is there a way to format sass code?

sitkibagdat
sitkibagdat
27,311 Points

I think you forgot a semi colon. This code works

.section2 { 
  background : linear-gradient(to bottom, #f2f2f2, dodgerblue); 
  p { 
    color       :white; 
    text-shadow : black 0px 0px 2px;
  } 
  .p1{ 
    color       : black;
    text-shadow : none; 
  } 
  a { 
  color : red; 
    &:hover {
      color: lighten(red,15%);
    } 
  }
}
Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

Thanks how did you format the code? I followed the instructions but it didnt work. Also, im trying to change the hover of an icon :

<div class="container1">
          <div id="icons" class="row">           
            <div class="medium-4 large-4 text-center column adjust">
              <a href="#"><i id="promotional" class="fi-calendar"></i></a>
                <h4><a class="iconlinks" href="#">Promotional Items</a></h4>
                <p>We provide promotional items like pens, calendars and banners with your logo and information. People will remember you when they need services!</p>
            </div>

#icons{

  a:hover{
    i{
      color: darken($primary-color, 20%);
    }

  }
}

but it wont darken on hover

Geoff Parsons
Geoff Parsons
11,679 Points

Ryan Hellerud Looks like you were just missing a newline between your paragraph and the "```" that starts the codeblock. Sometimes it can be a bit picky about that.

2 Answers

Eric Maya
Eric Maya
8,901 Points
Eric Maya
Eric Maya
8,901 Points

Hi Ryan Hellerud,

In the hover of an icon, try this in your css file:

#icons > a:hover > i {
    color: darken($primary-color, 20%);
}
Eric Maya
Eric Maya
8,901 Points
Eric Maya
Eric Maya
8,901 Points

In the text shadow, you should try this:

.section2{
    background: linear-gradient(to bottom, #f2f2f2, dodgerblue);
  p{
    color:white;
    text-shadow: black 0px 0px 2px;
  }
 .p1{
    color:black;
    text-shadow:none;
  }
  a{
    color:red;
      &:hover{
       color: lighten(red,15%);
      }
  }