I currently create a mix in that I use to create buttons with deep hover values and color I am trying to lighten my work for some reason in Sass, instead of the hex value of the returned color, spots white and black for the background color. Here this code is on the pen:
$ btn_color: #fff; $ Btn_lfa: 1; $ Btn_color_amount: 100%; $ Color_funcs: ('black tax': $ btn_color, $ btn_color_amount black (), 'light': light ($ btn_color, $ btn_color_amount), 'transparentize': transparentize ($ btn_color, $ btn_alpha)); _btn_color ($ base_color, $ amount, $ hover) {background @mixin: $ base_color; A: Hover, A: Focus {@each $ FUNC_NAME, $ color_func $ color_funcs {@if ($ FUNC_NAME == $ Hover) {$ btn_color: $ base_color; $ Btn_color_amount: $ amount; Background color: $ color_func; }}}} .btn {display: inline-block; Vertical-alignment: bottom; Text align: center; Range radius: 10px; Text-decoration: None; } {.btn_blue @include _btn_color (# 3c3c3c, 10%, 'black tax'); }
Once you exit this block of code, the expression Now does not exist, only the price he does to evaluate:
$ color_funcs: ('black tax': black tax ($ btn_color, $ btn_color_amount), 'light': $ Btn_color, $ btn_color_amount lighter (), 'transparent': transparent ($ btn_color, $ btn_alpha));
After this point there is nothing to change to $ btn_color
Saasya can not go back in time and repeat those expressions because they are original colors (black ) Have already been evaluated using
What can you do call
function.
@mixin _btn_color ($ base_color, $ amount, $ func) {background: $ base_color; One: hover, focus (background color: call ($ func, $ base_color, $ amount);}} .btn_blue {@include _btn_color (blue, 10%, 'dark'); white color;}
No comments:
Post a Comment