0

I have a class that is repeated multiple times. I'd like to change the text color of each class based on a list of colors that I define. If there are more elements than colors, the colors would need to start over. This is what I have so far, but it duplicates the colors for each element:

@colors: 'green', 'red', 'blue';

.view-priority-list-item-type {
    .for(@colors); .-each(@color) {
        color: @color;
    }
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Molly Harper
  • 2,363
  • 3
  • 26
  • 35
  • It all depends on how you need to define those elements if (if it's a predefined array of class names it's one story if it's something else then another). – seven-phases-max Oct 16 '14 at 21:52
  • 2
    Something like [this](http://codepen.io/seven-phases-max/pen/xzant?editors=110) for example. – seven-phases-max Oct 16 '14 at 22:12
  • Thank you! The elements that I want to do this to all have the same class name. Is this possible? In your case, all elements have different class names. – Molly Harper Oct 17 '14 at 13:33
  • Hmm, but if they have the same class name they are the same element. How do these selectors/elements differ in HTML itself? Is it something like `.foo .same-element-name`, `.bar .same-element-name` etc. or what? Obvisouly you cant's have different colors for just `.same-element-name` in CSS. (Just guessing) Maybe you need something like `nth-of-type`/`nth-child`? (See for [example](http://codepen.io/seven-phases-max/pen/tKdAm?editors=110)). – seven-phases-max Oct 17 '14 at 13:37
  • I guess I'm thinking of this in terms of JavaScript. This is basically what I want to do (but using LESS): http://codepen.io/jesouhaite08/pen/LyruG. Maybe it's not possible? – Molly Harper Oct 17 '14 at 14:02
  • The closest feature for that in CSS is those [`:nth-of-type`/`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type) I mentioned above. – seven-phases-max Oct 17 '14 at 14:13

1 Answers1

2

As the example of @seven-phases-max already show you, you should try the Less list functions:

  • length() -> Returns the number of elements in a value list.
  • extract() -> Returns the value at a specified position in a list. Notice that the first position has index 1 and not 0

And also the mod() function.

Than you can do:

less

@elements: 'one','two','thee','four';
@colors: 'green', 'red', 'blue';

.classes(@i) when (@i > 0) {
.classes((@i - 1));
@classname: e(extract(@elements,@i));
.@{classname} {
color: e(extract(@colors, mod(@i - 1,length(@colors))+1));
} 
}
.classes(length(@elements));

The above Less code will compile into the following CSS code:

.one {
  color: green;
}
.two {
  color: red;
}
.thee {
  color: blue;
}
.four {
  color: green;
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thank you! The elements that I want to do this to all have the same class name. Is this possible? In your case, all elements have different class names. – Molly Harper Oct 17 '14 at 13:23
  • i'm not sure what you mean? could you add an example of a possible HTML structure? – Bass Jobsen Oct 17 '14 at 13:56
  • Here's an example of what I want to do using JavaScript: http://codepen.io/jesouhaite08/pen/LyruG. I just thought there would be a way to do this using LESS. – Molly Harper Oct 17 '14 at 14:04
  • 1
    i think that is not possible, see http://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class. Unless your are able to wrap your elements in the same parent, than you can use the nth-child pseudo class, see also: http://stackoverflow.com/questions/23452403/automated-margin-functionality-in-css-not-js/26393284 – Bass Jobsen Oct 17 '14 at 14:30
  • 1
    Yep, both `:nth-of-type` and `:nth-child` restart counting with a new immediate parent ([demo](http://codepen.io/seven-phases-max/pen/vrgmy?editors=110)). – seven-phases-max Oct 17 '14 at 19:46