CCS

CCS, short for Cascading Code Sheets, is a CSS3-inspired programming language that allows for programmatical stylization, complete with event-driven code, conditional styles, and declarative programming. In the reference compiler, CCS produces JavaScript; however, compiling CCS will not always produce a single file, rather yielding two files- one CSS file and one JavaScript file- that enact the code in a good compiler.
== Features ==
* Powerful animations (planned)
* Conditional stylization (planned)
* Event-driven programming (defined)
* Logical nesting (defined, at least in my head)
* Expressions (defined)
* Variables (defined)
* Saving rules into variables (defined)
* Importing, so files can be split (planned)
== Syntax ==
=== Grammar (EBNF) ===
 value ::= exp
 | exp PERCENT
 | exp VW
 | exp VH
 | exp SEC
 ;
 
 var ::= DOLL NAME ;
 
 lit ::= NUM
 | STR
 | COLOR
 | NONE
 ;
 
 exp1 ::= exp PLUS exp
 | exp SUB exp ;
 
 exp2 ::= exp STAR exp
 | exp DIV exp
 ;
 
 exp ::= exp2
 | exp1
 | lit
 | var
 ;
 
 alist ::= value
 | alist COMMA value
 ;
 comma_sep_altexp ::= value
 | comma_sep_altexp COMMA value
 ;
 
 selector ::= STAR -- Any element
 | CARET -- This element
 | NAME -- Tag reference
 | DOT NAME -- Class reference
 | HASH NAME -- ID reference
 | selector COLON NAME [OPAREN alist CPAREN] -- Pseudo-class
 | selector COLON COLON NAME [OPAREN alist CPAREN] -- Pseudo-element
 | selector IMM_CHI selector -- Immediate child selector
 | selector ADJ_SIB selector -- Adjacent sibling selector
 | selector GEN_SIB selector -- General sibling selector
 | selector ALT selector -- Alternative selector
 | OPAREN selector CPAREN -- Group selectors (for whatever reason)
 ;
 
 style_type ::= NAME
 | NAME OPAREN alist CPAREN
 ;
 
 stylize ::= style_type COLON comma_sep_altexp ;
 trigger ::= style_type COLON rule
 | style_type COLON body
 ;
 line ::= stylize SEMI
 | trigger SEMI
 ;
 body ::= OBRACE {line} CBRACE;
 rule ::= selector body ;
 stmt ::= rule
 | NAME ASSGN rule
 | NAME ASSGN body
 | NAME ASSGN exp
 | NAME
 ;
 stmts ::= {stmt SEMI} ;
== Semantics ==
A CCS program is written in a declarative, event-driven syntax. Although it includes all the normal features of CSS, it also includes additional features that CSS has nothing even close to.
A CCS program, as you saw if you read the grammar, looks a bit like CSS. You can have rules of the following syntax: 
 selector {
 st1: v ;
 st2: va, vb, vc ;
 };
(Note the difference from CSS with the trailing semicolon)
A selector follows a certain expression syntax which is virtually identical to CSS3's selectors (but with the additional combinator ALT, written "|", which allows you to alternate selectors. CSS3 may have this feature, I'm not sure).
The "stylations" as I like to call them- the things in the curly braces separated by semicolons- are where things really get interesting. In normal CSS3, a stylation declares that a certain aspect of a selected element's appearance has a certain value. Normally, the value is a number or special value triggered by a keyword. In CCS, the value can be those, or an expression, or even another rule. This is where the event-driven programming comes in.
=== Event-driven Programming ===
To make CCS do something event-driven, one gives an element a stylation mapping an event (usually created from an event template by postfixing it with a syntax like a normal language's function call) to an effect. The effect is, oftentimes, another rule. Here's an example:
 red := {
 background-color: #FF0000
 on_click: $white;
 };
 white := {
 background-color: #FFFFFF;
 on_click: $red;
 };
 .swapcol white;
This creates a JavaScript file with the following effect:
* Any element with class "swapcol" has a white background initially
* When clicked, a "swapcol" element turns red (just that one element, not all of them) by changing its style to "red"
* The "red" style makes it so that, when clicked, it changes back to the initial "white" style
Category:Languages