less-mixins

I have the following mixin: .iconFont(@color: @green, @font-size: 18px){ color: @color; font-size: @font-size; } If I want only to change the second variable value, I need to write the first variable default value? h1{ .iconFont(@green, 14px); } No, there is no need to specify the default value for the first parameter while calling the function. Instead you can just use named parameters feature to explicitly let the compiler know that the value you are passing in the mixin call is for the 2nd parameter. .sample{ .iconFont(@font-size:14px); } The above Less code when compiled would produce the

I have some basic mixins that apply some rules using media queries .on-small(@rules) { @media (@minWidthSmall) { @rules(); } } .on-medium(@rules) { @media (@minWidthMedium) { @rules(); } } // and .on-large, .on-x-large and so on And I'm trying to build a very simple flex-based grid system, I'm trying to pass the mentioned mixins as parameters so I can have a generic .make-column mixin. as follows: .make-col(@break-point-mixin, @span, @size) { flex: 1; box-sizing: border-box; /*********************************************************** Is the following line possible in LESS somehow? ***********

H i, Hoping you can help. Is there a way for LESS to return just a value - feel like I'm missing something very obvious Say I have: @unit:em; @basevalue:1; Can I use something to give me a shorthand return for - .someClass { padding: ~'@{basevalue}@{unit}'; } Like say: .returnUnit() { ~'@{basevalue}@{unit}'; } .someClass { padding: returnUnit(); } because what I'm ultimately hoping for is: .returnUnit(@val) { @basevalue*@val@{unit}; } .someClass { padding:returnUnit(0.5); } Using a mixing I have to define the style property, however the value of this return function would be used for many

I am trying to make a mixin to propery convert pixels to relative ems. I would like it to be flexible enough to allow any property to be used with any number of pixel values. Any ideas on how to add multiple values to a single property without the recursion error I'm creating inside the for loop? desired usage example 1: .pixels-to-rems(font-size; 10); desired output: font-size: 10px; font-size: 1rem; desired usage example 2: .pixels-to-rems(padding; 10,0,20,10); desired output: padding: 10px, 0px, 20px, 10px; padding: 1rem, 0px, 2rem, 1rem; Here's the mixin as is. @baseFontSize: 10px; .pixels

I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this: .transition(@1) { -webkit-transition: @1; -moz-transition: @1; } div { .transition(all .5s); } The example above works fine, however I also have things like that: div { -webkit-transition: border-color .3s, background .3s; } And I can’t call the mixin as .transition(border-color .3s, background .3s) because it has more arguments than defined in the mixin . So what I am doing at the moment is this: .transition(@1) { -webkit-transition: @1; -moz-transition:

In Less, I can write: .outer { .inner { color: red; } } .test { .outer .inner; } But when I write: .outer { &-inner { color: red; } } .test { .outer-inner; } When I remove the .test , the .outer-inner output properly, but when I add it back, the compiler says .outer-inner is undefined. Is there anyway to re-use the styles of .outer-inner ? Harry Calling a mixin whose selector is formed by concatenation is currently not possible with Less. However the same is possible for selectors formed at compilation time using interpolation (also referred to as dynamically formed selectors). The below