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

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -