@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
@mixin allows you to create code in CSS similar to functions that you write once and you can reuse and reuse every time needed. Like a function it also needs parameters (here radius).
When such ‘function’ is created you have to include it so that you can use it in a program.
I hope it is a little helpful for the beginning!
Maybe is that helpful:
Curriculum HelpHTML-CSS
Jun 9
10 / 12
Jun 9
Jun 9
Catalactics
Jun 9
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;
}
Reply
codeofdreams
Jun 9
Okay, I understand that now. Could you make it more clear what is being asked of me in the challenge?
Reply
Catalactics
Jun 9
Alright, let’s look at the directions:
- 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…
2 Replies
Reply
codeofdreams
Jun 9
Oh, I think I understand now. I shall try it out.
1
Reply
Catalactics
Jun 9
Nice to know I helped. Good luck on figuring the challenge out!! Happy Coding!! 
1
Reply
codeofdreams
Catalactics
Jun 9
I don’t think my browser supports -webkit-ect. will that be a problem?
Reply
Catalactics
Jun 9
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:
MDN Web Docs
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web…
1
Reply
codeofdreams
Jun 9
<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?
Reply
Catalactics
Jun 9
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;
Solution
1
Reply
codeofdreams
Jun 9
Thank you! 
I got it now. I definitely dis not understand.
1
Reply
Catalactics
Jun 9
Glad I can help you. Now you can continue your journey into SASS. Good Luck on that And remember… Happy Coding!!!
