less-mixins

Adding vendor prefixes with LESS mixin

由 爱⌒轻易说出口 提交于 2019-12-10 19:12:05
问题 I'm getting a Syntax Error for this mix-in: .vendors(@statement){ @statement; -moz-@statement; -webkit-@statement; } Any way to do this, or do mixin variables have to be on the right side of a : ? 回答1: Since Less v2 you can use the autoprefix plugin to prefix your properties, which seems to be a better alternative. The autoprefix plugin add browser prefixes leveraging the autoprefixer postprocessor. For client side compiling (in the browser) you can use -prefixfree. As already mentioned by

Add argument into @keyframes property Less

由 你。 提交于 2019-12-10 16:25:23
问题 I have a property @keyframes , I compiled with autoprefixer to add the needed prefixes. What I would like to do, is to add an argument to the animation name (or wherever is possible) to change a value of properties into the keyframes key. This is what I have right now : @keyframes loader { 0% { transform: translate(0, -50%) rotate(0deg); } 100% { tranform: translate(0, -50%) rotate(360deg); } } And basically what I would like to do : @keyframes loader(@transform) { 0% { transform: @transform

How can I call a mixin by reference in LESS?

由 a 夏天 提交于 2019-12-10 14:17:18
问题 The logical way would be: .mymixin() { sample_key: samplevalue; } @avar: mymixin; .@{avar}(); but I get a parse error. Is there a way to do it? 回答1: Module mixins If you want to call a specific mixin by a reference from a variable you would need to use a parameter, as you can not dynamicaly call parametric mixins by their names . So, the closest to what you want to do, would be using module mixins. It would look like this in LESS : .mixin(mymixin) { sample_key:samplevalue; } .mixin

Conditionally setting one variable's value based on another

由 拟墨画扇 提交于 2019-12-08 12:44:12
问题 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){

How to declare same style for @media and descendant selector?

由 ＊爱你＆永不变心＊ 提交于 2019-12-08 11:59:01
问题 I need to define same style for elements under a media query and descendant by another class. Perfect solution in LESS could be the following [pseudo-code]: .foo { color:red; .example &, @media (min-width:800px) { color:blue; } } that should be desirable that would be compiled into: .foo { color: red; } .example .foo { color: blue; } @media (min-width: 800px) { .foo { color: blue; } } THIS SYNTAX IS INCORRECT but, do you have some suggestion to solve my problem? 回答1: Nope, selectors and

LESS: concatenate multiple background rules

由 Deadly 提交于 2019-12-08 04:44:52
问题 I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image . .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background:@start-color; background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image+: linear

Generation CSS group via less

由 孤街浪徒 提交于 2019-12-07 04:30:36
问题 Is it able to create such a mixin which generate CSS group? I will explain what I mean below: .fancymixin(@max, @prefix) { //content what I don't know how to code } .fancymixin(10, x); It generates something like: .x10, .x9, .x8, .x7, .x6, .x5, .x4, .x3, .x2, .x1 { //some fancy style I want to set } 回答1: You can use a loop (created using a guarded mixin) with one base class like below. The base class has the common properties and can be extended as many times from within the loop as required.

LESS: concatenate multiple background rules

由 跟風遠走 提交于 2019-12-06 16:16:15
I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image . .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background:@start-color; background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image+: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); background-repeat: repeat-x;

Restrict mixin values and throw exception when invalid value is provided

由 我只是一个虾纸丫 提交于 2019-12-06 08:50:24
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. Harry As far as I know, there is no way to make the Less compiler throw an error for an invalid value like described in question.

LESS CSS - Setting variable within mixin

由 丶灬走出姿态 提交于 2019-12-04 09:29:54
I've recently starting using LESS CSS - it's awesome (I recommend you check it out if you haven't yet). I'm working on a project, where I would like to do the following (It's not proper syntax, it's only to try and explain my problem): if(lightness(@background_color) <= 50%) { @secondary_color = #fff; } else { @secondary_color = #000; } I know that I can use mixins for this, but the above method would save me from having to write a mixins everytime I need to change a color based on the @background_color variable (since I will be using @secondary_color for borders, background colors, etc). I've
订阅 less-mixins