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?
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
@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:
@mixin
for border-radius
and give it a $radius
parameter-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.
Nice to know I helped. Good luck on figuring the challenge out!! Happy Coding!!
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:
<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;
Thank you! I got it now. I definitely dis not understand.
Glad I can help you. Now you can continue your journey into SASS. Good Luck on that And remember… Happy Coding!!!