как сделать более высокие прыжки в цикле SASS for - PullRequest
0 голосов
/ 03 мая 2019

Я хочу, чтобы мой цикл scss for составлял 15 каждый раз, когда цикл повторяется. Я нашел следующий код в стеке, но в моем вводе css он просто скачет на 1, как 1000 раз.

Вывод css, который я хочу:

#planningStudent #planningGrid #radio--0--15:checked ~ 
label[for="radio--0--0"] {
  background: #8FE501;
  color: #111; }

#planningStudent #planningGrid #radio--0--30:checked ~ 
label[for="radio--0--0"] {
  background: #8FE501;
  color: #111; }

#planningStudent #planningGrid #radio--0--45:checked ~ 
label[for="radio--0--0"] {
  background: #8FE501;
  color: #111; }


#planningStudent #planningGrid #radio--1--0:checked ~ 
label[for="radio--0--0"] {
  background: #8FE501;
  color: #111; }

#planningStudent #planningGrid #radio--1--15:checked ~ 
label[for="radio--0--0"] {
  background: #8FE501;
  color: #111; }

и т.д .......

вывод, который я сейчас получаю:

  #planningStudent #planningGrid #radio--0--0:checked ~ 
  label[for="radio--0--0"] {
    background: #8FE501;
    color: #111; }

  #planningStudent #planningGrid #radio--0--1:checked ~ 
  label[for="radio--0--1"] {
    background: #8FE501;
    color: #111; }

  #planningStudent #planningGrid #radio--0--2:checked ~ 
  label[for="radio--0--2"] {
    background: #8FE501;
    color: #111; }

 #planningStudent #planningGrid #radio--0--3:checked ~ 
 label[for="radio--0--3"] {
    background: #8FE501;
    color: #111; }

 #planningStudent #planningGrid #radio--0--4:checked ~ 
 label[for="radio--0--4"] {
   background: #8FE501;
   color: #111; }

и т.д ...

Вот scss для Loop, который я использовал;

Любая помощь будет отличной! Спасибо!

    $max: 60 * 24;
    $step: 15;
    @for $y from 0 through 4 {
        @for $x from 0 through ceil($max/$step) {
            #radio--#{$y}--#{$x}:checked ~ label[for="radio--#{$y}--#{$x}"] {
                background: $glr-green;
                color: #111;
            }
        }
    }

1 Ответ

0 голосов
/ 06 мая 2019

Честно говоря, немного сложно определить, что вы пытаетесь сделать.

Вот ДЕМО на основе этих критериев:

  • :checked радио - 0--0 игнорируется
  • :checked 1-й номер радио, начиная с 0, с шагом 1
  • :checked увеличение числа последних радиостанций на 15
  • метка всегда будет label[for="radio--0--0"]

if / else немного хакерский, но выполняет свою работу.

$glr-green: #8FE501;

@for $y from 0 through 3 {
  @for $x from 0 through 3 {
    @if ($y == 0 and $x == 0) { /* FOGEDABOUDIT */ }
    @else {
      #radio--#{$y}--#{$x * 15}:checked ~ label[for="radio--0--0"] {
          background: $glr-green;
          color: #111;
      }
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...