<section class="show_levels"> <div>$level: 1</div> <div>$level: 2</div> <div>$level: 3</div> <div>$level: 4</div> <div>$level: 5</div> </section> <h3>sample hover</h3> <section class="show_hover"> <div class="float">hover</div> </section>
body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; maring:0; } @mixin material-shadow($level: 1) { @if $level == 1 { box-shadow: 0 1px 3px rgba(0,0,0, 0.14), 0 1px 2px rgba(0,0,0,0.24); } @if $level == 2 { box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.23); } @if $level == 3 { box-shadow: 0 10px 20px rgba(0,0,0, 0.19), 0 6px 6px rgba(0,0,0, 0.23); } @if $level == 4 { box-shadow: 0 15px 30px rgba(0,0,0, 0.25), 0 10px 10px rgba(0,0,0, 0.22); } @if $level == 5{ box-shadow: 0 20px 40px rgba(0,0,0, 0.30), 0 15px 12px rgba(0,0,0, 0.22); } } .show_levels { padding: 40px; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; margin: 20px; background: #f3f3f3; div { font-size: 12px; background: #fff; padding: 50px; text-align: center; flex-basis: 100px; margin: 15px; @include material-shadow(1); } :nth-child(1){ @include material-shadow(1); } :nth-child(2){ @include material-shadow(2); } :nth-child(3){ @include material-shadow(3); } :nth-child(4){ @include material-shadow(4); } :nth-child(5){ @include material-shadow(5); } } .show_hover { padding: 40px; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; margin: 20px; background: #f3f3f3; div { font-size: 12px; background: #fff; padding: 50px; text-align: center; flex-basis: 100px; margin: 15px; transition:all 0.2s ease-in-out; cursor:pointer; @include material-shadow(1); &:hover{ @include material-shadow(3); } } }