PPAP SCSS

index.html

<div class="ppap">
</div>

ppap-scss.markdown

PPAP SCSS

A Pen by knhr__ on CodePen.

License.

style.scss

body {
  padding: 3rem;
  font-size: 16px;
  background: whitesmoke;
}

body > div {
  background: white;
  padding: 2rem;
}

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

$comment: "";
@if $state == $ppap{
  $comment: "\A Pen Pineapple Apple Pen!!"; 
} @else {
  $comment: "\A NOT FOUND PPAP !!";
}
.ppap{
   &:before {
     content: $content;
   }
   &:after {
     white-space: pre ;
     content: $comment;
   }
}