Подтвердить что ты не робот

Ассоциативный массив SCSS/SASS

Мне нужно преобразовать числа в слова, поэтому:

  • "1-3" → "одна треть"
  • "3-3" → "три трети"
  • "2-5" → "две пятых"

Цифры генерируются в цикле, который должен выводить кучу разных имен классов, таких как "одна треть" или "одна половина":

    $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
        }
    }

Мне кажется, мне нужно использовать два разных ассоциативных массива, которые в PHP (как пример) могут выглядеть так:

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

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

Возможно ли в SASS/SCSS создавать ассоциативные массивы вообще или существует ли какое-либо обходное решение?

4b9b3361

ОТВЕТЫ

Ответ 1

В Sass < 3.3 вы можете использовать многомерные списки:

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

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

DEMO

В Sass >= 3.3 получаем отображения:

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

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

DEMO

Итак, в терминах фракций вы можете просто что-то сделать в этом направлении, чтобы вам не нужно было несколько списков или карт:

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

а затем все, что вы хотите сделать с вашими циклами... может быть, даже что-то вроде этого = 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

(я написал это так, чтобы вы могли заметить в @for, что с помощью to идет n - 1)