I do not understand the Reusable CSS with mixins lesson

Tell us what’s happening:

Link to the challenge:

i am not sure I understand what this challenge requires of me. Can someone please explain?

Hello @codeofdreams,

So, let’s take a look back at the instructions


You were trying to type a lot of the same properties, but just for accesibility, So using SASS, you can make it into a variable (essentially). Using the @mixin then the name of the variable. Then specify that it takes a parameters. Then Apply it to the functions. Here’s an example:

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

Okay, I understand that now. Could you make it more clear what is being asked of me in the challenge?

Alright, let’s look at the directions:
image

  • It asks you to create a @mixin for border-radius and give it a $radius parameter
    Mixin is like a function, but it works differently.
  • It says it should use all the vendor prefixes, this means the browser that’s going to be used and the prefixes, so it’s
    -webkit-css-attribute, -moz-css-attribute, -ms-css-attribute. So with border-radius its going to be -webkit-border-radius and so on…

Oh, I think I understand now. I shall try it out.

1 Like

Nice to know I helped. Good luck on figuring the challenge out!! Happy Coding!! :slight_smile:

1 Like

I don’t think my browser supports -webkit-ect. will that be a problem?

No, that’s just prefixes for CSS. So -webkit- will specifically tell the HTML that if the browser is a mobile browser, then use the webkit property. -moz- will tell the HTML if the browser is A Mozilla Firefox, it will use that. -ms- is the same but for Microsoft. It’s just a prefix for browser compatibility.

Here’s a full list of Vendor Prefixes:

1 Like

<style type='text/scss'>
@mixin border-radius($radius) {
-webkit-border-radius:$x $y $blur $c;
-moz-border-radius: $x $y $blur $c;
-ms-border-radius: $x $y $blur $c;
-box-border-radius: $x $y $blur $c;
@include border-radius(15px);
}


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

}
</style>

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

I guess i still misunderstand. What did I do wrong?

Remember when I said it’s like a function?? So you want to pass the parameter INTO the stuff so like:

@mixin background-color($color) {
-webkit-background-color:$color;
-moz-background-color: $color;
-ms-background-color: $color;
-box-background-color: $color;
1 Like

Thank you! :+1: I got it now. I definitely dis not understand.

1 Like

Glad I can help you. Now you can continue your journey into SASS. Good Luck on that :slight_smile: And remember… Happy Coding!!!:slight_smile:

1 Like