css - How to Pass Parameters with Commas in Less -
i have mixin takes name of shape , coordinates. wondering how pass in coordinates if coordinates contains commas?
.clip-path(@shape @coords) { -webkit-clip-path: @shape(@coords); -moz-clip-path: @shape(@coords); clip-path: @shape(@coords); } .foo { .clip-path(polygon, 0 0, 0 100%, 100% 0); /* trying achieve: clip-path: polygon(0 0, 0 100%, 100% 0); */ }
note: second comments made torazaburo. please don't use less mixins way add prefixes. more simpler use prefixing tool autoprefixer or prefix-free.
that said, below few ways in can achieve output looking for:
.clip-path(@shape, @coords) { -webkit-clip-path: ~"@{shape}(@{coords})"; -moz-clip-path: ~"@{shape}(@{coords})"; clip-path: ~"@{shape}(@{coords})"; /* use interpolation display output */ } .foo { .clip-path(polygon, ~"0 0, 0 100%, 100% 0"); /* pass values 1 single string */ }
or, use advanced @rest
variable option below. way pass variable number of args mixin , still make match mixin definition.
.clip-path(@shape; @coords...) { -webkit-clip-path: ~"@{shape}(@{coords})"; -moz-clip-path: ~"@{shape}(@{coords})"; clip-path: ~"@{shape}(@{coords})"; } .foo { .clip-path(polygon; 0 0, 0 100%, 100% 0); } .foo2 { .clip-path(polygon; 0 0, 0 100%, 100% 0, 100% 100%); /* less compiler pick values after first coords */ }
alternately, if mixin add vendor prefixes (which don't recommend mentioned earlier), simplest option below:
.clip-path(@args) { -webkit-clip-path: @args; -moz-clip-path: @args; clip-path: @args; } .foo { .clip-path(~"polygon(0 0, 0 100%, 100% 0)"); /* pass whole thing string */ }
Comments
Post a Comment