Is it possible to darken an array with colors? Like this:
#array: #color1 #color2 #color3 #color4
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
&:hover {
// THIS IS NOT WORKING, IS THERE A RIGHT APPROACH FOR THIS?
.background-color(extract(darken(#array, 5.5%, #i)));
}
}
.color-mix(#i - 1);
}
}
// Iterate
.color-mix(4);
If I understand your question correctly, yes, you can achieve that. Below is how you do it. Your code was almost correct except that instead of trying to darken the extracted value, it was trying to extract a darkened value (which is not possible).
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
&:hover {
.background-color(darken(extract(#array, #i), 5.5%));
}
}
}
.color-mix(#i - 1); /* I have moved it because I think it was wrongly placed */
}
// Iterate
.color-mix(4);
One improvement that I would suggest to your code is to move the :hover selector also within the .background-color mixin like below. This makes it a bit more easier to read as there is no wrapping of a function call within another function and so on.
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
}
}
.color-mix(#i - 1);
}
// Iterate
.color-mix(4);
.background-color(#color){
&{
background-color: #color;
&:hover{
background-color: darken(#color, 5.5%);
}
}
}
Even better would be this - just avoid the mixin if you can :)
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
#color: extract(#array, #i);
background-color: #color;
&:hover{
background-color: darken(#color, 5.5%);
}
}
}
.color-mix(#i - 1);
}
// Iterate
.color-mix(4);
Related
Is there any efficient way to write this code with less.js:
I've got already 3 variables colors : #vert, #violet and #orange
li {
&:nth-child(1) {
background: #vert;
&:hover,
&.open {
>.dropdown-menu li {
background: #vert;
}
}
}
&:nth-child(2) {
background: #violet;
&:hover,
&.open {
>.dropdown-menu li {
background: #violet;
}
}
}
&:nth-child(3) {
background: #orange;
&:hover,
&.open {
>.dropdown-menu li {
background: #orange;
}
}
}
}
I thought of a mixin, but I'm not writing well: Any help please ?
.colored-menu(#number, #color) {
&:nth-child(#number) {
background: #color;
&:hover,
&.open {
>.dropdown-menu li {
background: #color;
}
}
}
}
and calling it like this:
.colored-menu(1,#vert);
.colored-menu(2,#violet);
.colored-menu(3,#orange);
You can use your approach with some edits:
// mixin
.colored-menu(#number; #color) { // the docs recommends semi-colons instead of commas
&:nth-child(#{number}) { // variable requires curly brackets for interpolation
background: #color;
&:hover,
&.open {
> .dropdown-menu li {
background: #color;
}
}
}
}
// ruleset
li {
.colored-menu(1; #vert);
.colored-menu(2; #violet);
.colored-menu(3; #orange);
}
Also, consider using the each list function:
// list
#colors: #vert, #violet, #orange;
// ruleset
li {
each(#colors, {
&:nth-child(#{index}) {
background: #value;
&:hover,
&.open {
> .dropdown-menu li {
background: #value;
}
}
}
});
}
The output from both approaches are the same (in this instance).
I wonder if there's a way to programmatically create classes with stylus using Iterators.
Example:
$my-colors = {
"black": #344F5E,
"grey": #E0E0E3,
}
I know there's define() but I'm not sure if that works and if so how I would access the key and the value side.
like
for col in $rf-colors
define('rf-bg-' + col #() {
background-color:
})
Goal is to extend the color pallette and have all classes automatically generated. Maybe I'm using the completely wrong approach.
You can use interpolation with {} and a loop on a hash for $key, $value in $hash:
$my-colors = {
"black": #000,
"white": #fff
}
for $name, $color in $my-colors {
.{$name} {
background-color: $color
}
}
which will output:
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
The define() function is used to define variables.
I have a for loop in SASS which loops through page classes to insert a colour break for each module. For example:
#for $i from 1 through 4 { // the loop
.m0#{$i} .module-title{
background-color: nth($m_col_lvl_01_list, $i);
}
//- end loop
}
Which compiles to:
.m01 .module-title{
background-color: green;
}
.m02 .module-title{
background-color: blue;
}
.m03 .module-title{
background-color: yellow;
}
.m04 .module-title{
background-color: orange;
}
In the task I have at the moment it includes .m00 Is there a way of including 00 in the loop?
I think you can still achieve what you want using 0 in the for loop.
$list: (green, blue, orange, red, yellow);
//loop from 0 to the length of the list which isn't hardcoded
#for $i from 0 to length($list) {
.m0#{$i} .module-title {
//simply add one to the loop index to get the correct list item
background-color: nth($list, $i + 1);
}
}
This compiles to the following CSS
.m00 .module-title {
background-color: green;
}
.m01 .module-title {
background-color: blue;
}
.m02 .module-title {
background-color: orange;
}
.m03 .module-title {
background-color: red;
}
.m04 .module-title {
background-color: yellow;
}
I have created an ul element and I have put some li items inside. I want to change the background color of each li item using an array in a for loop. This is what I have, but the result is just a string :(
"use strict";
var colorArray,
i,
ulVar,
listItem;
colorArray = [
"color1",
"color2",
"color3",
"color4",
"color5",
"color6"
]
ulVar = document.createElement("ul");
ulVar.setAttribute("id", "#text-color");
ulVar.innerText = "Some unordered list"
document.body.appendChild(ulVar);
for(i = 0; i < colorArray.length; i++){
listItem = document.createElement("li");
listItem.setAttribute("class", colorArray[i]);
console.log(listItem.getAttribute("class")); //just to check what's inside
listItem.innerText = colorArray[i];
ulVar.appendChild(listItem);
}
The css code is just this:
#text-color {
color: #fff;
}
.color-1 {
background-color: #0000ff;
}
.color-2 {
background-color: #ff6600;
}
.color-3 {
background-color: #cc00cc;
}
.color-4 {
background-color: #009933;
}
.color-5 {
background-color: #669999;
}
.color-6 {
background-color: #663300;
}
I don't know how to make the colorArray[i] to return the class properties and not just string. I'm learning now so please don't judge me too hard :)
I'm testing something special and I'm trying to loop inside keyframes to dynamically write percentages into it.
I've tested something like that with SASS but it doesn't work.
#keyframes test{
#for $i from 0 through 100 {
#{$i}% {
//do special stuff
}
$i: $i + 1;
}
I want it to output :
#keyframes test{
0%{
...
}
1%{
...
}
2%{
...
}
3%{
...
}
...
}
But I got
Error on line number: 23. Invalid CSS after " #{$i}%": expected placeholder name, was " {"
I've tested this in LESS and it doesn't work either.
#a: 0%;
#keyframes test{
.func (#a, #b, #c);
}
.func (#a, #b, #c) when (#a < 100%){
(#a){
//do special stuff
}
.func (#a+1, #b, #c);
}
Can someone help me ?
It will work if you finagle it like this:
#keyframes test {
#for $i from 0 through 100 {
#{$i * 1%} {
// do special stuff
}
}
}
LESS version
requires the .for mixin
https://github.com/pixelass/more-or-less/blob/master/less/fn/_for.less
NOTICE
This is a NON inline-js version for maximum compatibility
INPUT
#keyframes crazy {
.for(0,100);.-each(#i){
#selector: e('#{i}%');
#{selector} {
/* do crazy stuff */
}
}
}
OUTPUT
#keyframes crazy {
0% {
/* do crazy stuff */
}
1% {
/* do crazy stuff */
}
2% {
/* do crazy stuff */
}
3% {
/* do crazy stuff */
}
4% {
/* do crazy stuff */
}
...etc
}
Sass apparently needs a value defined as percentage for it to render correctly.
This example generates keyframes to animate a background, but you can change both the list of values and the property to animate.
SASS
//Given a list of colors
$COLORS: $COLOR-MAIN #f39d75 #c1cecd #f3f57e
// Define a mixin
=animate-color-keyframes($list: $COLORS, $property: background)
//declare the first keyframe statically
0%
#{$property}: nth($list, -1)
#for $i from 1 through length($list)
// calculate the keyframe percentage
$percentage: $i / length($list)
$keyframe: percentage($percentage)
// render keyframes
#{$keyframe}
#{$property}: nth($list, $i)
// .....
#keyframes change-bg-color
+animate-color-keyframes
CSS OUTPUT
#keyframes change-bg-color {
0% {
background: #f3f57e; }
25% {
background: #abf0b3; }
50% {
background: #f39d75; }
75% {
background: #c1cecd; }
100% {
background: #f3f57e; }
}