Create Reusable CSS with Mixinsz

HTML-CSS
#1

Tell us what’s happening:

I did everything right ( well, I think!), I need help, PLEASE :’(

Your code so far


<style type='text/sass'>
  
  @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
  }
  
  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include $border-radius(15px);
    
  }
</style>

<div id="awesome"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/create-reusable-css-with-mixins/

#2

You are so close. If you look at the challenge example, you will notice box-shadow does not have a $ in front of it.

1 Like
#3

thank you , I couldn’t complete the challenge of storing a color in a variable (I think it’s a bug) so I thought this was a bug too :sweat_smile: , thank you again

#4

What is the url of the challenge to which you are referring above?

1 Like
#5

the url

<style type='text/sass'>
  
  $text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color : $text-color;
  }
</style>

<h1 class="header">Learn Sass</h1>
<div class="blog-post">
  <h2>Some random title</h2>
  <p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
  <h2>Header #2</h2>
  <p>Here is some more random text.</p>
</div>
<div class="blog-post">
  <h2>Here is another header</h2>
  <p>Even more random text within a paragraph</p>
</div>
#6

There is a small bug in that the test is expecting normal property/value syntax (placement of colon and spacing) .

propertyName: propertyValue;

Above represents what the format of the property/value pairs. Your code does not reflect normal syntax, but if you rewrite it like I have above, it will pass the challenge tests.

1 Like
#7

I used F5 to refresh the page and reset the code and rewrite it but the problem persists .

<style type='text/sass'>
  
  $text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }
</style>

<h1 class="header">Learn Sass</h1>
<div class="blog-post">
  <h2>Some random title</h2>
  <p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
  <h2>Header #2</h2>
  <p>Here is some more random text.</p>
</div>
<div class="blog-post">
  <h2>Here is another header</h2>
  <p>Even more random text within a paragraph</p>
</div>```
#8

Try using Chrome instead of Safari.

1 Like
#9