Create Reusable CSS with Mixins- The Original Code

Create Reusable CSS with Mixins- The Original Code
0

#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