MukhametshinDenis
12/24/2017 - 10:21 AM

Sass Mixin Shadow

миксин на тень при ховере

//миксин на тень при ховере
//_var.sass
@mixin shadow($num) 
	@if $num < 1 
		box-shadow: none
	@else if $num == 1
		box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12)
	@else if $num == 2
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16)
	@else if $num == 3
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19)
	@else if $num == 4
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25)
	@else if $num == 5
		box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3)
    
    //main.sass
    button
      @include shadow(1)
      &:hover
        @include shadow(6)