less-mixins

问题 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 ? 回答1: Calling a mixin whose selector is formed by concatenation is currently not possible with Less. However the same is possible for selectors formed at

问题 I've got a Less variable called @side . What I want is to set the variable @sideOpposite depending on the value of the @side variable. It can take only two values: "left" or "right". In other words I need a Less equivalent of the JS code: var side = "left", sideOpposite = (side === "left")? "right" : "left"; I've tried to accomplish this using when function, but from what I understand it doesn't work that way and is only applicable to CSS properties, not variables: when (@side = right){

问题 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 ? 回答1: Calling a mixin whose selector is formed by concatenation is currently not possible with Less. However the same is possible for selectors formed at

问题 I need to achieve such effect, but even when @padding actually < @height it still use multiplier value 2, which is non-sense...Is there any limitation i don't know about? .btn-svg-offset(@height, @padding) { @paddings-n: floor(@height / @padding); @multiplier: 2; & when (@padding < @height) { @multiplier: 1; } @btn-svg-offset: @padding + ((@height / @multiplier) * @paddings-n); }; Any workarounds are welcome) 回答1: & when is not if (they usually say so just for short). & {...} is still a

问题 What I want to do is to create a mixin that takes arguments and uses one or more of the arguments as names for other mixins to be included. as I'm not sure about the proper terms, I'll try to explain through example: @gradients{ light:#fafafa; //Should these also be prefixed with @? dark:#888888; } @gradientBackground(@name,@height){ background-image:url('../img/gradients/{@name}-{@height}.png'); //this works background-color:@gradients[@name]; } .someBox{ @gradientBackground(light;150); } /

问题 I wish to create a CSS animation that act like "Blink effect" using LESS. My purpose is to call a single mixin passing each time 2 @stop colors in order to get diffent color blink depending by css class of DOM element. Currently I have the following HTML: <p class='blink'> Loading... </p> <p class='blink alert'> <big>WARNING!!!! Operation failed.</big> </p> And here, LESS CODE: .blink { .animation-blink-mixin(@dark-green,@light-green); &.alert { .animation-blink-mixin(@dark-red,@light-red); }

问题 Any suggestion how to create a conditional mixin based on parameter existence? For example I need to to verify that all the parameters are passed in order to perform something or not, for example: .margin (@margintop:0,@marginbottom:0,@marginright:0,@marginleft:0) { // if @marginright:0 or @marginleft:0 are passed do that... // else... } 回答1: 1: In general, when you need to generate different things for different number of arguments passed you don't need to use default argument values at all,

问题 I'm looking for a less syntax to do something like that: .button-default{ background-color: rgb(100,200,250); :hover{ .button-hover-effect-mixin(); } } .button-warning{ background-color: rgb(250,100,0); :hover{ .button-hover-effect-mixin(); } } .button-hover-effect-mixin(){ background-color: darken(PARENT.background-color, 50%); } I know how to do that with a parameter or a global variable but the hover-effect schould not always be designed to change the background-color. 回答1: If you mean the

问题 In a LESS mixin, I have an alpha value that I'd like to convert to a plain number (0.xx) even if it is given as a percentage (xx%). I've found the percentage() function to convert a number to a percentage, but percentage(xx%) returns "xx00%" and dividing by 100 makes 0.xx into 0.00xx, which is no good either. All the "if-then" statements that I could find in LESS invlove making a new scope, so while I could detect the "%", I couldn't pass that information back into a variable to use it. How

问题 I'm trying to create a Less mixin to generate media queries. The goal is to store my breakpoints in a variables.less file, and loop through them to create @media blocks. The mixin would then be used as: .mq-medium({ // rules }); and generate CSS like: @media only screen and (min-width: 640px) { // rules } Here's my current mixin: variables.less /* media queries */ @breakpoints: small 0, medium 640px, large 1024px, xlarge 1281px, xxlarge 1440px; mediaqueries.less .createMQClasses(@iterator:1)