SASS - Create Reusable CSS with Mixins

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
this step is really confusing, i dont know where to start from

  **Your code so far**

<style type='text/scss'>



#awesome {
  width: 150px;
  height: 150px;
  background-color: green;

}
</style>

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

  **Your browser information:**

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

Challenge: SASS - Create Reusable CSS with Mixins

Link to the challenge:

#2

Can you be more specific about which sentence or paragraph you didn’t understand? Or that needs clarification?
Thanks

#3

what is going on here

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}
#4

Good question.
Basically this section shows you examples of how to deal with different browsers’ implementation of CSS features.

For a completely hypothetical example, let’s say that there people who decide what CSS is all about, make a new css rule “border: wavy” that is supposed to make a wavy line around elements if used. When the developers/programmers who make commercial browsers read this rule, they have to spend time to understand and implement the code for it. Maybe some of them may implement right away and others may take a year or two to get it working. So in the meantime, when you are creating your webpage, if you use this border: wavy rule then it won’t work on every user’s browser.
So what to do?
This is where the code you asked about comes it. You are essentially defining different behaviour depending on the detected browser (maybe wavy borders only work on safari for eg so you need to use a dotted border instead everywhere else)…

Hopefully this explains it a bit more.

1 Like
#5

maybe, but m finding problems implementing the codes

#6

that’s fair.
Here are the instructions? Which one have you attempted?

Write a mixin for border-radius and give it a $radius parameter. It should use all the vendor prefixes from the example. Then use the border-radius mixin to give the #awesome element a border radius of 15px .

(show the code for what you have attempted or let us know if you need to understand something in the instructions)

#7

4 posts were merged into an existing topic: Learn HTML by Building a Cat Photo App - Step 10

#8

honestly i have not done anything, i dont know how to go abt the whole thing

#9

A post was merged into an existing topic: Learn HTML by Building a Cat Photo App - Step 10

#10

i already done that but its not running

<style type='text/scss'>
@mixin boarder-radius($x, $y, $radius, $c){ 
  -webkit-boarder-radius: $x $y $blur $c;
  -moz-boarder-radius: $x $y $radius $c;
  -ms-boarder-radius: $x $y $radius $c;
  boarder-radius: $x $y $radius $c;
}
Learn HTML by Building a Cat Photo App - Step 10
#11

please confirm the following:

1- is the spelling border-radius or boarder-radius?
2- does the css border property take all these values $x, $y, $blur, $c
or does it just need one variable (the radius)? (Try to recall how you would write a normal border: property in CSS)

Hint: a border example with a radius of 5px solid red would be
border: 5px solid red;

#12

Thank you very much, i have successfullay passed all the stages, but the last one is proving difficult

#13

What does your code look like now?

You may want to also confirm that you understand what the styling effect being requested is. (As if you understand it then you can check if you have accomplished it visually as well)

#14

this

<style type='text/scss'>
@mixin border-radius(  $radius){ 
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius ;
}
div{
@include  border-radius (15px)}
#15

Recall the instructions said:

Then use the border-radius mixin to give the #awesome element a border radius of 15px .

Do you think you have given the required element the new radius?
Hint: the code should refer to #awesome not div

#16

i think that is what i have done here

<style type='text/scss'>
@mixin border-radius(  $radius){ 
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius ;
}
#awesome{
@include  border-radius (15px)}
#17

Your code is now syntactically correct but the test is probably not passing yet?

This is because when you first started this step you were given some code that targets #awesome already.

They expect you to use the given code to fulfill the challenge.

So try to reset the step to put the original code back in place.

The add the new mix in you created (you can copy it from here).
Then finally add a reference to it inside the #awesome selector given to you. (Do not create another one)

#18

i guess this is what you meant

 #awesome{
    @include  border-radius (15px);
    width: 150px;
    height: 150px;
    background-color: red;
#19

almost there. when calling the mixin, you must put the bracket immediately after the name of the mixin like this:
border-radius(
(no space in between)

1 Like