CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @function list($key, $value, $list:false) {
  
  @if ($list == false) {
    $list: ();
  }
  
  $key: '"' + $key + '"';
  
  $length: length($value);
  
  @if $length > 1 {
    $array: '[ ';
    
    @for $i from 1 through $length {
      $array: $array + '"' + nth($value, $i) + '"';
      @if $i < $length {
        $array: $array + ', ';
      }
    }
    
    $array: $array + ' ]';
    $value: $array;
  } @else {
    $value: '"' + $value + '"';
  }
  
  @return append($list, ($key $value));
}

@function json($list) {
  $length: length($list);
  $json: '{ ';
  
  @for $i from 1 through $length {
    $pair: nth($list, $i);
    $json: $json + nth($pair, 1) + ': ' + nth($pair, 2);
    @if $i < $length {
      $json: $json + ', ';
    }
  }
  
  $json: $json + ' }';
  @return $json;
}

body { text-align: center; margin-top: 1em; }
body::before {
  
  /* start with a key/value */
  $food: list(fruit, apple);
  
  /* now add an array of values */
  $food: list(meat, chicken pork, $food);
  
  /* convert our list into JSON */
  content: json($food);

}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................