Assoziatives Array SCSS / SASS

Brauche ich zum konvertieren von zahlen in Worte, also:

  • "1-3" -> "ein Drittel"
  • "3-3" -> "drei Drittel"
  • "2-5" -> "zwei-Fünftel"

Die zahlen generiert werden, in einer Schleife, sollte die Ausgabe eine Reihe von verschiedenen class-Namen wie one-third oder 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
    }
}

Ich glaube, ich brauche zwei verschiedene assoziative arrays, die in PHP (nur als Beispiel) könnte so Aussehen:

$1 = array( 
   "1"=>"one", 
   "2"=>"two", 
   "3"=>"three" 
);

$2 = array( 
   "1"=>"whole", 
   "2"=>"half", 
   "3"=>"third" 
);

Ist es möglich, in SASS/SCSS um assoziative arrays zu erstellen, oder gibt es Abhilfe?

InformationsquelleAutor der Frage Daniel | 2014-01-25

  1. 48

    In Sass < 3.3 Sie können die Verwendung von mehrdimensionalen Listen:

    $numbers: (3 "three") (4 "four");

@each $i in $numbers {
    .#{nth($i,2)}-#{nth($i,1)} {
        /* CSS styles */
    }
}

    DEMO

    In Sass >= 3.3 erhalten wir Karten:

    $numbers: ("3": "three", "4": "four");

@each $number, $i in $numbers {
    .#{$i}-#{$number} {
        /* CSS styles */
    }
}

    DEMO

    So, in Bezug auf die Fraktionen, könnte man nur tun Sie etwas in diese Richtung, so dass Sie nicht brauchen, mehrere Listen oder Karten:

    $number: 6;
$name: (
    ("one"),
    ("two" "halv" "halves"),
    ("three" "third" "thirds"),
    ("four" "quarter" "quarters"),
    ("five" "fifth" "fifths"),
    ("six" "sixth" "sixsths")
);

    und dann, was Sie tun möchten, mit Ihrem loops ... vielleicht sogar so etwas wie diese =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

    (Ich schrieb es auf diese Weise, so dass Sie feststellen können, in @fordass die Verwendung to geht n - 1)

    InformationsquelleAutor der Antwort Martin Turjak

Schreibe einen Kommentar