css - Issues creating transform mixin -


i'm trying yo create mixing css transform rule. tried following:

@mixin transform($action, $value) {     -webkit-transform: $action($value);     -ms-transform: $action($value);     transform: $action($value); } 

ms ie9 webkit mobile devices transform rest caniuse

but output:

-webkit-transform: rotate 45deg; -ms-transform: rotate 45deg; transform: rotate 45deg; 

it seems brackets () not taken account structure. know how solve this?

you can this

@mixin transform($action) {   -webkit-transform: $action;   -ms-transform: $action;   transform: $action; } 

and send in parameter ()

@include transform(rotate(45deg)) 

this produce

-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); 

edit

solutions keeping 2 parameters

@mixin transform($action, $value) {   -webkit-transform: $action + '(' + $value + ')';   -ms-transform: $action + '(' +$value + ')';   transform: $action + '(' + $value + ')'; } 

or

@mixin transform($action, $value) {   -webkit-transform: $action + '(#{$value})';   -ms-transform: $action + '(#{$value})';   transform: $action + '(#{$value})'; } 

Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -