variable scss lighten index functions darkness color array arrays sass

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 */ } }

DEMO

En Sass> = 3.3 obtenemos mapas:

$numbers: ("3": "three", "4": "four"); @each $number, $i in $numbers { .#{$i}-#{$number} { /* CSS styles */ } }

DEMO

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 */ } } }

DEMO

(Lo escribí de esta manera para que puedas notar en @for , que usar to ir a n - 1 )