Create Reusable CSS with Mixins- The Original Code

HTML-CSS
1

Tell us what’s happening:
hi, i just wana know what the original code means ?

div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}

The only box-shadow effect that is shown is the last one and if we wanted to make more than one box shadow for the same element we add a “,” between each box-shadow like this :

box-shadow:0px 0px 4px #fff,0px 0px 4px #fff,0px 0px 4px #fff;

the example also says that instead of writing the same css over and over we can use the sass variables…why don’t we just do this :

div h2 h3 {box-shadow:…}

that way h2 and h3 and div will all have the box-shadow

Your code so far


<style type='text/sass'>
  
  
  
  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    
  }
</style>

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

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/create-reusable-css-with-mixins

2

hi, i just wana know what the original code means ?
-webkit-box-shadow - Webkit CSS items work on Chrome.
-moz-box-shadow - Moz CSS items work on Firefox.
-ms-box-shadow - MS CSS items are for Internet Explorer.
box-shadow: Umm… okay, I’m not sure about this one.

why don’t we just do this :
div h2 h3 {box-shadow:…}
I don’t think that’s needed for the lesson, there are no h2 or h3 elements.

Here’s an illustration to explain the lesson:
-You have 100 divs, and you want them all to have box-shadows.
-You could write this up 100 times:

-webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;

-Wow that’s a lot of CSS. You gotta write 400 lines of box-shadow.

OR
-You could write this up 1 time:

@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;
}

-Then include this 1 line in all 100 divs:
@include box-shadow(0px, 0px, 4px, #fff);

They both do the same thing. It’s just the second option uses less lines.

3

mm why don’t we just add a class or an id in each div and in the css we put the box-shadow ? isn’t that simpler ?
example:
#y{-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff; }
<div id="y">anytext</div>

4

If you use a class that way, every single box shadow will look identical. But what if you wanted them all to look different?

If you notice, the @include line puts numbers into the CSS. This lets you specify how a specific class or id looks, while still reusing the same code.

1 Like