Sass: Create Reusable CSS with Mixins- what is happening in @mixin?

Tell us what’s happening:

Your code so far


<style type='text/scss'>
/*Please explain me what is happening inside @mixin*/
@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}

#awesome {
  @include border-radius(15px);
  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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Create Reusable CSS with Mixins

Link to the challenge:

Your code runs properly!

What is your question?

I made it run with hints but I couldn’t understand this:
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;

@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:

I do not understand the Reusable CSS with mixins lesson

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:
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…

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!! :slight_smile:

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

Vendor Prefix

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! :+1: 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 :slight_smile: And remember… Happy Coding!!!:slight_smile:

1 Like

Haha! Look! For the first time one of my problems is helpful!

1 Like