arrays - lighten - Array asociativo SCSS/SASS
sass maps (2)
Necesito convertir números en palabras, entonces:
- "1-3" -> "un tercio"
- "3-3" -> "tres tercios"
- "2-5" -> "dos quintos"
Los números se generan en un bucle, que debería generar un montón de nombres de clase diferentes, como one-third
o one-half
:
$number = 3;
@for $i from 1 through $number-1 {
// some calculations to output those classes: ".one-third", ".two-thirds"
// The following currently outputs class names like ".1-3" and ".2-3"
.#{$i}-#{$number} {
// CSS styles
}
}
Creo que necesito usar dos matrices asociativas diferentes, que en PHP (solo como un ejemplo) podría verse así:
$1 = array(
"1"=>"one",
"2"=>"two",
"3"=>"three"
);
$2 = array(
"1"=>"whole",
"2"=>"half",
"3"=>"third"
);
¿Es posible en SASS / SCSS crear matrices asociativas o hay alguna solución?
Además de la respuesta de Martin, mi ejemplo para usar colores como variables, que también funciona con funciones de procesamiento de color como darken()
:
$blue: rgb(50, 57, 178); $green: rgb(209, 229, 100); $orange: rgb(255, 189, 29); $purple: rgb(144, 19, 254); $colors: ( "blue": $blue, "green": $green, "orange": $orange, "purple": $purple ); @each $name, $color in $colors { .tc-#{$name} { color: #{$color} !important; } .bgc-#{$name} { background-color: #{$color} !important; } }
En Sass <3.3 puedes usar listas multidimensionales:
$numbers: (3 "three") (4 "four");
@each $i in $numbers {
.#{nth($i,2)}-#{nth($i,1)} {
/* CSS styles */
}
}
En Sass> = 3.3 obtenemos mapas:
$numbers: ("3": "three", "4": "four");
@each $number, $i in $numbers {
.#{$i}-#{$number} {
/* CSS styles */
}
}
Entonces, en términos de fracciones, podrías hacer algo en esta dirección, para que no necesites varias listas o mapas:
$number: 6;
$name: (
("one"),
("two" "halv" "halves"),
("three" "third" "thirds"),
("four" "quarter" "quarters"),
("five" "fifth" "fifths"),
("six" "sixth" "sixsths")
);
y luego lo que quieras hacer con tus bucles ... tal vez incluso algo como esto = D
@for $i from 1 to $number {
@for $j from 2 through $number {
.#{ nth( nth( $name, $i ), 1 ) }-#{
if( $i>1,
nth( nth( $name, $j ), 3 ),
nth( nth( $name, $j ), 2 )
)} {
/* CSS styles */
}
}
}
(Lo escribí de esta manera para que puedas notar en @for
, que usar to
ir a n - 1
)