흩어져 문지르고 있는 재료입니다만, 어제 PPAP가 유행어에도 선택되었으므로 CSS(SCSS)만으로 실장해 보았습니다.

참고
ぃ tp // m / hmhmsh / ms / 9c1848437b765 538d3
ぃ tp // m / on 0 · ms / e f32f79b에서 5452 a2

사양

Pen: ✏️
Pineapple: 🍍
Apple: 🍎

Pen, Pineapple, Apple, Pen을 무작위로 출력하고 ✏️🍍🍎✏️ 의 줄이 오면 "Pen Pineapple Apple Pen !!"라고 출력하고 종료합니다.

데모

PPAP SCSS on Codepen

캡처

처리 부분

$content: "";
$pen: "✏️";
$pineaple: "🍍";
$apple: "🍎";
$array: $pen, $apple, $pineaple;
$init: "";
$p: $pen;
$pp: $pen + $pineaple;
$ppa: $pen + $pineaple + $apple;
$ppap: $pen + $pineaple + $apple + $pen;
$state: $init;

@function createState($nextState, $t, $c){
    @if $c == $t {
      @return $nextState;
    } @else {
      @return $init; 
   }
}

@while $state != $ppap {
    $c: nth($array, random(3));

    $content: append($content,  $c);    

    @if $state == $init{
      $state: createState($p, $pen, $c);
    } @elseif $state == $p {
      $state: createState($pp, $pineaple, $c);
    } @elseif $state == $pp {
      $state: createState($ppa, $apple, $c);
    } @elseif $state == $ppa {
      $state: createState($ppap, $pen, $c);
    } @else {
      $state: $init; 
    }
}

랜덤 함수 정보

SCSS 라고 해도 결국 정적인 CSS 를 토출할 뿐이므로 Random 함수는 컴파일시에 랜덤한 값을 출력할 뿐입니다.
그 때문에 Codepen상에서는 리로드시에 컴파일이 달리기 때문에 의사적으로 좋다 매번의 표시로 다른 출력을 재현할 수 있습니다.

요약

while, if, random이 있다면 뭐든지 할 수 있다! !