В SCSS выполнить break

282

21 июля 2017, 03:10

Есть такой код.

Pug:

div(data-counter="100")

SCSS:

$start: 100;
$end: 20;
div:before {
  content: attr(data-counter);
  animation: countdown 10s steps(1, start) forwards;
}
@keyframes countdown {
  @for $i from 1 through $start { 
    @if $i == 50 {
      100% {
        content: 'Stop';
      }
    } @else {
      #{$i}% {
        content: '#{($start - $i)}';
      }
    }
  } 
}

Задача в том, что счетчик отсчитывает со 100 и при достижении 50-и счетчик бы останавливался, т.е 100% { content: 'Stop'; } и анимация бы заканчивалась (сейчас она продолжается 49% { content: '51'; } 100% { content: 'Stop'; } 51% { content: '49'; }).

Вопрос: Есть ли для scss что-то вроде break; как в js?

Пример на codepen.

P.S: @break; не срабатывает как хотелось бы.

PPS: Этот вопрос на английском.

Answer 1

Можно сделать гораздо проще:

div { 
  line-height: 1.2; 
  height: 1.2em; 
  overflow: hidden; 
} 
 
div:after { 
  display: inline-block; 
  white-space: pre-wrap; 
  content: "100\A 99\A 98\A 97\A 96\A 95\A 94\A 93\A 92\A 91\A 90\A 89\A 88\A 87\A 86\A 85\A 84\A 83\A 82\A 81\A 80\A 79\A 78\A 77\A 76\A 75\A 74\A 73\A 72\A 71\A 70\A 69\A 68\A 67\A 66\A 65\A 64\A 63\A 62\A 61\A 60\A 59\A 58\A 57\A 56\A 55\A 54\A 53\A 52\A 51\A Stop"; 
  animation: move-up 10s steps(50) 1 forwards; 
} 
 
@keyframes move-up { 
  from { transform: translateY(0) } 
  to   { transform: translateY(calc(1.2em - 100%)) } 
}

<div></div>

Answer 2

Из комментария на so

Решение заключается в замене знака сравнения == на знак больше >:

Pug:

div(data-counter="100")

SCSS:

$start: 100;
$end: 20;
div:before {
  content: attr(data-counter);
  animation: countdown 10s steps(1, start) forwards;
}
@keyframes countdown {
  @for $i from 1 through $start { 
    @if $i > 50 {
      100% {
        content: 'Stop';
      }
    } @else {
      #{$i}% {
        content: '#{($start - $i)}';
      }
    }
  } 
}

Это действительно работает, хотя и компилирует не совсем как хотелось бы, css:

  ...
  100% {
    content: 'Stop';
  }
  100% {
    content: 'Stop';
  }
  100% {
    content: 'Stop';
  }
  100% {
    content: 'Stop';
  }
  ...

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Brackets, Less не компилирует Css

Периодически в Brackets При сохранении изменений в файле стилейless не производиться, генерация этих изменений в

286

CSS

Не работают CSS-подсказки в PhpStorm

Если в файле подключен CSS например:

253

CSS

Позиционирование фона CSS

Есть следующий макет - http://prntscrcom/fxhby1

181

CSS

Обрезается фон при масштабировании

При масштабировании страницы, появляются странные отступы от краев браузера при 100% ширине: Вот так выглядит при 100% обзоре в браузере, то есть...

248