CSS(SCSS)だけでPPAP✏️🍍🍎✏️

散々擦られているネタですが, 昨日PPAPが流行語にも選ばれましたのでCSS(SCSS)のみで実装してみました。

参考
http://qiita.com/hmhmsh/items/a9c1848437b765e538d3
http://qiita.com/on0z/items/ef32f79bde5452a2ccec

仕様

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 があれば割となんでもできる！！