JASS.js : Javascript Assembled Style Sheets

index.html

<h1 color="update" background="update!">
  JASS<sup>.JS</sup> - CSS scripting
</h1>

<h3>
  This page's CSS was compiled using JASS.js (Javascript Assembled Style Sheets)
</h3>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/200597/jass.jpg">
<script src="../pen/ByPOee.js"></script>

JASS.js : Javascript Assembled Style Sheets.markdown

JASS.js : Javascript Assembled Style Sheets

I want to recreate a SASS type of compiler but in JS.

A Pen by Mink CBOS - Ephellon Dantzler on CodePen.

License.

script.js

(function JASS(){ // JASS 0.6.3 - Ephellon Dantzler

  var p = document.getElementsByTagName( '*' );
  var jass = [];
  var JASS_Vars = '';
  var JASS_Vals = '';
  var JASS_Mixins = [];
  var JASS_Ext = [];
  var Jass = [];

  for( var z = 0; z < p.length; z++ ) {
    var c = p[z];
    if ( c.getAttribute( '.JASS' || '.JCSS' ) !== null || ( (/(@JASS|@JCSS)/).test(c.innerHTML) && (/style/i).test(c.tagName) && !(/<(.+)>/g).test(c.innerHTML) ) ) jass[jass.length] = c.innerHTML.replace(/(\n|;|\{|\})/gm, '\n'); Jass[Jass.length] = c;
  }

  for ( var q = 0; q < jass.length; q++ ) { // main JASS loop

    var vr = /\$/g;
    var j = jass[q].split( '\n' );

    for ( var W = 0; W < j.length -1; W++ ) { // assign var
      var u = j[W].split( ':' );
      var n = (vr.test(u[0].replace(/\s/g, '').charAt(0)))?u[0].replace(/\s/g, ''):null;
      var v = (n!=null)?u[1]:null;
      JASS_Vars += (n!=null)?n + ';':'';
      JASS_Vals += (v!=null)?v.replace(/"/g, '') + ';':'';
      //document.write(((n!=null)?n + ': ':'') + ((v!=null)?'"' + v.replace(/"/g, '') +'"' + ';<br>':''));
    }

    JASS_Vars = JASS_Vars.split( ';' );
    JASS_Vals = JASS_Vals.split( ';' );

    J = Jass.length;
    j = JASS_Vars.length;

    for ( var w = 0; w < J -1; w++ ) { // declare var
      for(var e = 0; e < j -1; e++) {
        r = JASS_Vars[e];
        reg = RegExp( r.replace( '$', '\\$' ), 'g' );
        val = JASS_Vals[e];
        Ele = Jass[w];
        Ele.innerHTML = Ele.innerHTML
          .replace(r, '~@null')
          .replace(/~@null.+;/g, '/* Jass.js - ' + r + ' */')
          .replace(/@JASS/, '/* JASS */')
          .replace(/#:(.+)\n/g, '/* $1 */')
          .replace(reg, (((/^\s*~/g).test(val))?eval(val.replace('~','')):val));
      }
      for(var e = 0; e < j -1; e++) {
        r = JASS_Vars[e];
        reg = RegExp( r.replace( '$', '\\$' ), 'g' );
        val = JASS_Vals[e];
        Ele.innerHTML = Jass[w].innerHTML
          .replace(r, '~@null')
          .replace(/~@null.+;/g, '/* Jass.js - ' + r + ' */')
          .replace(/@JASS/, '/* JASS */')
          .replace(/#:(.+)\n/g, '/* $1 */')
          .replace(reg, (((/^\s*~/g).test(val))?eval(val.replace('~','')):val));
      }
    }
  }

})();

style.css

 @JASS #: <- tell JASS that you want to use JASS in this element

  #: JASS use strict! <- not a real feature yet; but the same as JS "use strict!"
  /*
  JASS syntax: Javascript Assembled Style Sheets
  JCSS ""    : Javascript Compiled Style Sheets
  JFSS ""    : Javascript Filtered Style Sheets
  JXSS ""    : Javascript eXtended Style Sheets
  
  NOTE: not all features are supported yet, and are subject to change

  - $var: x; - declare 'var'
  - $var: ~x; - a JavaScript expression, 'x'
  * note: if you want a var* to include a var, you must declare the var first, i.e. $x: $y [$y must be declared first]
  - $: [~]x; - a null JavaScript declaration (not suggested, use $~: instead)
  - @for i in x..y do job; - a for loop
  - @if (b): job; - if loop
  - @else: job; - else loop
  - @parent x (y) { job @ y; } - same as SASS @import
  - @adopt x (y); - same as SASS @include
  - x { ... } - allow use of this in &@{x} (extend x to a global var)
  - !@(x) { ... } - don't allow use of this in &-x (don't extend x, a local variable)
  - &@{ ... }; - same as SASS @extend
  - #( ... ); - operators, same as $:, but in CSS
  - x@y - attach y to all xs
  - #: - single line comment

  /* this embedded comment protects the CSS from being a comment, please do NOT remove it */

  #: a single line comment
  #: KP.Qy( '.class #id tag' ).$({ color:'#00aced' }); <- not a feature in KP yet, see [codepen.io/Ephellon/details/ByPOee] for more info
  #: when using JASS in another "script," import the CSS then JS

$font-stack: Arial, monospace;
$time:      ~$time = KP.time.as.rgb();
$color:     ~KP.toString( $time );
$other:     ~$time = KP.toString( KP.$( $time ).opposite() );
$font:      $font-stack, sans-serif;

body {
  font:       $font; #: call on the variable
  color:      #fff;
  background: $color;
}

h1 {
  color: $other;
}

img {
  margin-top: 0;
  float:      left;
}

.class {
  color: #000;
}

#id, !@#id {
  color: #fff; #: !@ blocks the use of this element in extensions
}

*:hover {
  &@{ body }; #: this part extends where "body" is found
  &@{ .class img }; #: this extends where ".class" and "img" are found
  &@{ #id }; #: this will return false, !@(#id) blocks its use
}

@parent transition($trans, $t) {
  transition:         $trans $t;
  -o-transition:      $trans $t;
  -moz-transition:    $trans $t;
  -webkit-transition: $trans $t;
}

/* Other Experimental features

@for i in 0..9 do // seperate per line, combine, and eval?
div:nth-child(#{ i }) { // replace #{ var } with var value
    font-size: #(i*100); // calc
  }
@end i

@if ( bool = true ) { // : is =, = is ==, == is ===
  @adopt transition(all, 10s);
} @else {
  @adopt transition(all, 5s);
}

*/