less-mixins

问题 I need to repeat my selector. is there any way in Less CSS to do this with function/mixin? Note: Content of frame is different. .slide1{ .frame{ .obj1{} .obj2{} .obj3{} } [data-fragment=1].active ~ .frame { .obj1{} .obj2{} /* frame1 css */ } [data-fragment=2].active ~ .frame { .obj2{} .obj3{} /* frame2 css */ } /* other frames ... */ } .slide2{ /* slide2 css */ } /* other slides ... */ to .slide1{ .frame{/* ... */} .frameselector(1){/* frame1 css */} .frameselector(2){/* frame2 css */} }

问题 I want to make a function/mixin that will make a color darker if it is already dark but lighter when it is light (normalize/extremeize?) Is it possible to do this by passing a property name (color, background-color, border-right-color, etc)? .normalize(@color, @amount, @prop: "color") when (lightness(@color) >= 50%) { @prop:lighten(@color, @amount); } .normalize(@color, @amount, @prop: "color") when (lightness(@color) < 50%) { @prop:darken(@color, @amount); } 回答1: This is currently a feature

问题 I have this code: @import "vars.less"; // Desktop/Laptop Section @import "mixins-d-1.less"; @import "positioning.less"; @import "containers-d-1.less"; Inside containers-d-1.less I reference a mixin from mixins-d-1.less . However, I get an error saying that it's undefined. I'm able to pull my variables out of vars.less , why can't I pull my mixins out of mixins-d-1.less ? 回答1: The problem wasn't the importing at all, really. I made a mistake in how I was using media queries. Both files had the

问题 I'm trying to call a mixin as an argument in another mixin but I get a syntax error. There's no variables in the offending mixin call, just arguments. I'm not sure if this is possible. The answers I've seen on here seem to be either hacks or to be dealing with variables and strings as arguments. Less CSS // color variables for user's color @userColor: #13acae; @darkUser: hsl(hue(@userColor), saturation(@userColor), lightness(tint(@userColor, 30%))); @lightUser: hsl(hue(@userColor), saturation

问题 I have a LESS mixin. When a certain body class is present I want to alter one value of the mixin. .my-style() { font-weight: bold; color: red; } .my-style-altered() { color: blue; } .element { .my-style; } .body-class .element { .my-style-altered; } This is working fine. However my list of selectors is getting longer: .my-style() { font-weight: bold; color: red; } .my-style-altered() { color: blue; } .element, .element-2, .element-3 { .my-style; } .body-class .element, .body-class .element-2,

问题 I have a LESS mixin. When a certain body class is present I want to alter one value of the mixin. .my-style() { font-weight: bold; color: red; } .my-style-altered() { color: blue; } .element { .my-style; } .body-class .element { .my-style-altered; } This is working fine. However my list of selectors is getting longer: .my-style() { font-weight: bold; color: red; } .my-style-altered() { color: blue; } .element, .element-2, .element-3 { .my-style; } .body-class .element, .body-class .element-2,

问题 How to reduce this code (probably with a loop ?), to have a "function" which takes direction and number? @dir = the wanted "direction" @number = how many times I need a shadow (here 10 times) @color = color of the shadow Example (working, but not very easy to use) : .perspective-box(@dir, @number, @color) when (@dir = se){ -webkit-box-shadow:1px 1px 0 0 @color, 2px 2px 0 0 @color, 3px 3px 0 0 @color, 4px 4px 0 0 @color, 5px 5px 0 0 @color, 6px 6px 0 0 @color, 7px 7px 0 0 @color, 8px 8px 0 0

问题 I have the following Less mixin: .box-sizing(@value) { -webkit-box-sizing: @value; -moz-box-sizing: @value; box-sizing: @value; } and I would like to allow only the values 'border-box' and 'content-box' as parameter, otherwise the Less engine should throw an exception. How can I achieve this? Because without this validation I can write any value to the mixin and it will work, but it will also generate invalid CSS and no one will notice that there is an error. 回答1: As far as I know, there is

问题 I need to add an icon to a page, depending by its content. In other words, if a page contain an image, a gallery, a video... I'll add an icon indicating its nature. To do this, I add CSS class to body tag and use descendant selector to add icons in the proper position. Obviously this task results in a lot of repeating code in CSS, so I would like to generate it with a LESS Loop. Here my actual attempt ( icons are icon-fonts ): @icons:"\e926", "\e90e", "\e914"; .icons-loop(@i; @ico) when (@i <

问题 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