expand Code Player
RUN

            

About RCSS

RCSS ('Recess' / Narcissistic name - 'Rain CSS') is a PHP-based CSS Processor. Popularized by known CSS pre-processors such as LESS and SCSS, RCSS aims to bring the joy and fun back in writing CSS with nifty features straight out-of-the-box. Aside from the core feature built under its hood, it can be extended via plugins that anyone can easily write and share.

A bit of history

RCSS was just a product of a great accident. I was just writing a CSS and Javascript code compressor to use in our projects in Rain Creative Lab (a web design agency I own) when I realize that aside from compressing css, you can do more stuff to it... Then comes the challenge — what would it take to write my own CSS Pre-processor? I was aware about LESS and SASS and the cool things you can do with it (actually, RCSS is loosely inspired by LESS syntax). So I decided to take on the challenge and go write something.

RCSS changed the way my team writes CSS. Suddenly writing old school css seems to be tedious and repetitive without nesting and css variables. Moreover, writing long vendor specific codes over and over again seems to be tiring without functions and mixins.

This is the second revision and first public release of to our simple CSS Processor. I rewrite it from scratch to improve its syntax and capabilities. I was hesitant to open it and make it public. However, I realize that there is no harm in letting people use it and hopefully find benefits from it or at least have a small contribution to the world of CSS and the web.

Enough talk... Let's get started.

Features

Variables

Try it

Tired of using the same value for your colors over and over again. Why don't you use variables instead?

rcss css
                                @color:green;
                                @width:300px;

                                // Use variables
                                .block {
                                  background:@color;
                                  color:#fff;
                                  width:@width;
                                }
                            
                                .block {
                                  background:green;
                                  color:#fff;
                                  width:300px;
                                }
                            

Nesting

Try it

Tired of repeating selectors? Nesting might be the thing for you.

rcss css
                                .block {
                                  strong { ... }
                                  em {
                                      span { ... }
                                  }
                                }
                            
                                .block { ... }
                                .block strong { ... }
                                .block em { ... }
                                .block em span { ... }
                            

Functions

Try it

Functions enables you to reuse chunks of code and tweak them with arguments.

rcss css
                                -vendor-prop(prop, value) {
                                   -webkit-/@prop/: @value;
                                       -moz-/@prop/: @value;
                                           -o-/@prop/: @value;
                                         -ms-/@prop/: @value;
                                                  /@prop/: @value;
                                }

                                -border-radius(radius:2px) {
                                   // Call the vendor-prop
                                   // function
                                   -vendor-prop(border-radius, 
                                                            @radius);
                                }

                                .block {
                                  -border-radius;
                                }
                            
                                .block {
                                  -webkit-border-radius:2px;
                                       -moz-border-radius:2px;
                                            -o-border-radius:2px;
                                          -ms-border-radius:2px;
                                                  border-radius:2px;
                                }
                            

Traits

Try it

Inspired by Object Oriented Programming, now you can group your functions into Traits and use them just like any other object.

rcss css
                                // Treat functions like 
                                // objects
                                @trait Layout as l {
                                   // create an equal
                                   // subdivision
                                   -subd(width, division) {
                                     width: @width/@division;
                                     float: left;
                                   }
                                }
                                // Apply the trait
                                .block @use l.subd(100%, 3);
                            
                                .block {
                                  width:33.33%;
                                  float:left;
                                }
                            

Media Query

Try it

Fan of Responsive web design? I got something for you.

rcss css
                                // Media targets
                                @def media {
                                  iphone {
                                    max-width:320px;
                                  }
                                  ipad {
                                    max-width:1024px;
                                  }
                                }

                                // Target device
                                @on ipad {
                                  body {
                                    background:#fff;
                                    font-size:1.5em;
                                  }
                                }

                                .block {
                                  font-size:1.2em;

                                  // Target device 
                                  // inside a block
                                  @on iphone {
                                    font-size:1em;
                                    color:#222;
                                  }
                                }
                            
                                .block {
                                  font-size:1.2em;
                                }
                                @media screen and 
                                              (max-width:1024px) {
                                  body {
                                    background:#fff;
                                    font-size:1.5em;
                                  }
                                }
                                @media screen and 
                                              (max-width:320px) {
                                  .block {
                                    font-size:1em;
                                    color:#222;
                                  }
                                }
                            

Animation

Try it

Get your hands dirty with CSS Animation minus the long and repetitive lines of code.

rcss css
                                @keyframes move {
                                  from { top:0px;   }
                                  to   { top:200px; }
                                }

                                // Animate the block
                                .block {
                                  --animate(move, 10s);
                                }
                            
                                @keyframes move {
                                  from { top:0px;   }
                                  to   { top:200px; }
                                }
                                @-webkit-keyframes move {
                                  from { top:0px;   }
                                  to   { top:200px; }
                                }
                                @-moz-keyframes move {
                                  from { top:0px;   }
                                  to   { top:200px; }
                                }
                                @-o-keyframes move {
                                  from { top:0px;   }
                                  to   { top:200px; }
                                }

                                .block {
                                  animation: move 10s;
                                  -webkit-animation: move 10s;
                                  -moz-animation: move 10s;
                                  -o-animation: move 10s;
                                }
                            

Plugins

I know that I can't do it all alone. Now you can extend and expand the capabilities of RCSS with plugins.
The examples below are just the native plugins I have included in RCSS core language.

                                // Import plugin 
                                @import globals.css, base.css;

                                // Animation plugin
                                --animate(move, 20s);

                                // Math plugin
                                --math(200/5);
                            

Installing RCSS

Here are the steps you need to follow for RCSS to work properly.

  1. Copy the /rcss source folder into your project folder.

  2. After copying, inside the /rcss folder, open and edit the /rcss/config.php. In the configuration file, you need to tell the system to locate your css folder. You can do that by editing following line:

                                    'css_folder'            => "path/to/my/css/folder"
                                
    NOTE: Every URI will be rewritten relative to the value of your 'css_folder'
  3. Few things you need to know about this configuration file:

    Build Mode

                                    'build_mode'            => 1
                                

    If you are into development mode, it is suggested that you set your build_mode variable to 1. This instructs the system to rebuild and recompile your code everything you refresh the page. Yup that's right, that simple.

    When you are already deploying your code into production environment, you can switch build_mode to 0 to retrieve and use the compiled version of your code.

    Readable Flag

    'is_readable'         => 1

    By default, the compiled CSS is compact. We strip all white spaces that's not neccessary. By flagging the is_readable, the system will beautify the final code after compilation. If you want to read the final code for inspection, it's good to turn this on. If you are into production mode, make sure you turn this to 0.

  4. Some permission to consider

    Please make the folders inside /output writable. This is where the system stores all the compressed CSS and JS code.

  5. To use the engine, all you have to do is:

                                    <link rel="stylesheet" type="text/css" href="rcss/?css=YOUR_CSS_FILE" />
                                

    Change the css parameter to the css file you want to process. Then you are ready to go.
    If you are into getting the best out of this system, go and read the section below. You can play around with the code while you learn.

Syntax

Variables

I don't need to define what a variable is. A variable in RCSS behaves just like any variable in any programming language.

Syntax

You define a variable by:

@color: #ea0923;

To use it:

background: @color;  // Returns #ea0923;

Note: any variable you define outside an open { curly braces, before any known selector is considered as global in scope.

Global Variables

Global variable behaves more like a constant. You can access its value anywhere in your code. Its value remains the same and can be temporarily overwritten when a local variable replaced its value.

RCSS Try it
                                    // Global Variables
                                    @color: green;
                                    @bg: #222;

                                    // Application
                                    body {
                                      color:@color;
                                      background:@bg;
                                    }
                                
Output
                                    // Application
                                    body {
                                      color:green;
                                      background:#222;
                                    }
                                

Overrides a global variable:

RCSS Try it
                                    // Global Variables
                                    @color: green;
                                    @bg: #222;

                                    // Application
                                    body {
                                      // Override the variable @color
                                      @color:red;

                                      color:@color;
                                      background:@bg;
                                    }

                                    p {
                                      color:@color;
                                    }
                                
Output
                                    // Application
                                    body {
                                      // The global variable @color
                                      //  with the initial value "green"
                                      //  changes to "red"
                                      color:red;
                                      background:#222;
                                    }

                                    // Return to its original value.
                                    p {
                                      color:green;
                                    }
                                

Local Variables

The scope of the variable is dependent to where it's located. A good example on how variable scoping is handled is through the following code:

RCSS Try it
                                    // Global Variables
                                    @color: green;
                                    @bg: #222;

                                    // Application
                                    body {
                                      // Override the variable @color
                                      @color:red;

                                      color:@color;
                                      background:@bg;
                                    }

                                    p {
                                      color:@color;
                                      background:@bg;

                                      //Override the @bg variable
                                      @bg:#cecece;

                                      // Nested property
                                      span {
                                        background:@bg;
                                      }
                                    }

                                    .code {
                                      background:@bg;
                                    }
                                
Output
                                    // Application
                                    body {
                                      // The global variable @color 
                                      // with the initial value "green"
                                      // changes to "red"
                                      color:red;
                                      background:#222;
                                    }

                                    // Return to its original value.
                                    p {
                                      color:green;
                                      background:#222;
                                    }

                                    // Background was overridden.
                                    p span {
                                      background:#cecece;
                                    }

                                    // Return to its original value.
                                    // The scope of variable change for 
                                    // the background ended when the
                                    // code block was closed.
                                    .code {
                                      background:#222;
                                    }
                                

A local variable can only affect its descending children. Any variable that was overridden by any known children or descendant won't affect the value of parent.

You can use variables in nesting, functions, traits and plugins.

Variable Interpolation

There might be cases that you want to treat a variable as property or do simple string concatenation. To do that you need to interpolate its value.

Syntax

A variable can be interpolated by adding / forward slash before and after the variable name:

                            // Name of the variable
                            @name:border-radius;

                            // Treat as variable and not an interpolated string.
                            // It overrides the @name from 'border-radius' to '30px'
                            @name:30px;

                            // The system treats this as an interpolated string and not a variable definition. 
                            // It returns as border-radius:30px;
                            /@name/:30px;
                        

Example:

RCSS Try it
                                    // Global Variables
                                    @property:border-radius;
                                    @padding:5;

                                    .curved {
                                      // Add a curve border
                                      /@property/:10px;
                                      -webkit-/@property/:10px;
                                      -moz-/@property/:10px;
                                      -o-/@property/:10px;
                                    }

                                    .padded {
                                      padding:/@padding/px;
                                    }
                                
Output
                                    // Interpolated variable
                                    .curved {
                                      border-radius:10px;
                                      -webkit-border-radius:10px;
                                      -moz-border-radius:10px;
                                      -o-border-radius:10px;
                                    }

                                    .padded {
                                      padding:5px;
                                    }
                                

Escaping String

Due to the parser's limited capabilities, and the complexity of the language and limited knowledge of the writer, there are case that you need to escape a particular string.

Linear gradients are one of those tricky situations you need to escape its string value.

                            .gradient {
                                background: -moz-linear-gradient(top, #@startColor 0%, #@endColor 100%);
                                background: -webkit-linear-gradient(top, #@startColor 0%,#@endColor 100%);
                            }
                        

To escape the string, you need to add a 'tilde':

~/-vendor-prefix-that-might-mess-the-engine/

You notice that vendor prefixes starts with - the same way functions are written in RCSS. To prevent any weired things from happening, you can naturally escape lines by doing this:

RCSS Try it
                                    @startColor:red;
                                    @endColor:green;

                                    // Apply it to a class
                                    .gradient {
                                        background: ~/-moz-linear-gradient/(top, @startColor 0%, @endColor 100%);
                                        background: ~/-webkit-linear-gradient/(top, @startColor 0%,@endColor 100%);
                                    }
                                
Output
                                    // The system ignores the line and 
                                    // treat it as any normal string.
                                    .gradient {
                                        background: -moz-linear-gradient(top, red 0%, green 100%);
                                        background: -webkit-linear-gradient(top, red 0%, green 100%);
                                    }
                                

I might be addressing this issue on the next few revisions of this engine.

Functions

Some called it mixins, but here, I just call it functions. Just like in any programming language, function are blocks of code you can call perform certain things.

Just like mixins, you can add arguments with or without default values. A function can access and defined variables, or call and execute known plugins, or even call other functions.

Syntax

Any function in RCSS starts with the character followed by the function name and/or its corresponding arguments.

Q Why didn't you use how LESS or SASS does their own mix-ins or functions? Not that I'm against it, its a matter of parsing simplicity and code clarity once a function is applied.

                            // Function with no arguments.
                            -horizontal-centered {
                              margin:0 auto;
                            }

                            // Function with arguments
                            -soften(radius) {
                              @prop: 'border-radius';

                              -webkit-/@propp/:@radius;
                              -moz-/@propp/:@radius;
                              -o-/@propp/:@radius;
                            }

                            // Function with arguments and default values
                            -center(top:0, bottom:0) {
                              margin:@top auto @bottom;
                            }
                        

Using the code above, you can call each function by doing the following:

RCSS Try it
                                    // Function with no arguments.
                                    -horizontal-centered {
                                      margin:0 auto;
                                    }

                                    // Function with arguments
                                    -soften(radius) {
                                      @prop: 'border-radius';

                                      -webkit-/@propp/:@radius;
                                      -moz-/@propp/:@radius;
                                      -o-/@propp/:@radius;
                                    }

                                    // Function with arguments and default values
                                    -center(top:0, bottom:0) {
                                      margin:@top auto @bottom;
                                    }

                                    // Calls the function
                                    // -horizontal-centered
                                    .centered {
                                      -horizontal-centered;
                                    }

                                    // Calls the function -soften
                                    // with argument value of 10px
                                    .container {
                                      -soften(10px);
                                    }

                                    // Calls the function -soften 
                                    // with argument shorthand 
                                    // value of 10px 20px
                                    .container {
                                      -soften(10px 20px);
                                    }

                                    // Calls the function -center 
                                    // using only the default arguments
                                    .block {
                                      -center;
                                    }

                                    // Calls the function -center
                                    // overriding the top argument
                                    .block {
                                      -center(10px);
                                    }

                                    // Calls the function -center
                                    // overriding both arguments
                                    .block {
                                      -center(20px, 10px);
                                    }
                                
Output
                                    // Code output for -horizontal-centered
                                    .centered {
                                      margin:0 auto;
                                    } 

                                    // Code output for -soften with 
                                    // argument value of 10px
                                    .container {
                                      -webkit-border-radius:10px;
                                      -moz-border-radius:10px;
                                      -o-border-radius:10px;
                                    } 

                                    // Code output for -soften with 
                                    // argument shorthand 
                                    // value of 10px 20px
                                    .container {
                                      -webkit-border-radius:10px 20px;
                                      -moz-border-radius:10px 20px;
                                      -o-border-radius:10px 20px;
                                    } 

                                    // Code output for -center
                                    // using only the default arguments
                                    .block {
                                      margin:0 auto 0;
                                    } 

                                    // Code output for -center 
                                    // overriding the top argument
                                    .block {
                                      margin:10px auto 0;
                                    } 

                                    // Code output for -center 
                                    // overriding both arguments
                                    .block {
                                      margin:10px auto 20px;
                                    }
                                

Let's break it down.

Functions with no arguments

There are cases that a certain function doesn't need any arguments. It's just a matter of calling it directly from your code. You can do that by:

                            -borderized {
                              border:2px #222 solid;
                            }
                        

For functions without arguments, you don't need to add any parenthesis.

To call the function:

RCSS Try it
                                    // Borderized
                                    -borderized {
                                      border:2px #222 solid;
                                    }

                                    .block {
                                      -borderized;   
                                    }
                                
Output
                                    .block {
                                      border:2px #222 solid;   
                                    }
                                

Function with Arguments

If you want to reuse your functions to do various things, you can add arguments to it:

                            -borderized(thickness, color, style) {
                              border:@thickness @color @style;
                            }
                        

Use it by:

RCSS Try it
                                    .block {
                                      -borderized(1px, green, solid);   
                                    }

                                    // You can even pass a 
                                    // variable if you want
                                    .block {
                                      @color:blue;
                                      -borderized(1px, @color, solid);   
                                    }
                                
Output
                                    .block {
                                      border:1px green solid;   
                                    }

                                    .block {
                                      border:1px blue solid;
                                    }
                                

If you want to give your argument a default value:

                            -borderized(thickness, color:red, style:solid) {
                              border:@thickness @color @style;
                            }
                        

The above code will use red for color if the color argument is not provided. Same goes to style. However, you need to assign a value for the thickness argument. To use it:

RCSS Try it
                                    // Borderized
                                    -borderized(thickness, 
                                                color:red, 
                                                style:solid) {
                                      border:@thickness @color @style;
                                    }

                                    .block {
                                      -borderized(5px);   
                                    }

                                    // I'm just supplying the color.
                                    .block {
                                      @color:blue;
                                      -borderized(1px, @color);   
                                    }
                                
Output
                                    .block {
                                      border:5px red solid;   
                                    }

                                    .block {
                                      border:1px blue solid;
                                    }
                                

Another example:

                            -column(float:left) {
                              float:@float;
                              width:20%;
                            }
                        

Applying the function:

RCSS Try it
                                    -column(float:left) {
                                      float:@float;
                                      width:20%;
                                    }

                                    .column-left {
                                      -column;
                                    }

                                    .column-right {
                                      -column(right);
                                    }
                                
Output
                                    .column-left {
                                      float:left;
                                      width:20%;
                                    }

                                    .column-right {
                                      float:right;
                                      width:20%;
                                    }
                                

In the example above, the function -column has a default value for the argument float which is left. If you want to use its default value, call it with no parenthesis.

In contrast, column-right overrides the default value of the argument to float:right.

Function within a Function

A function can be also called and executed inside any function:

                            -borderized(thickness, color:red, style:solid) {
                              border:@thickness @color @style;
                            }

                            -column(float:left) {
                              float:@float;
                              width:20%;
                              -borderized(2px);
                            }

                            -widget(width:50%) {
                              // You can define a variable inside a function.
                              @border-color:cyan;

                              width:@width;
                              float:left;
                              -borderized(1px, @border-color, dotted);
                            }
                        

In the example above, -borderized function is called inside the -column and -widget functions with various modification from its arguments.

RCSS Try it
                                    -borderized(thickness, 
                                                color:red, 
                                                style:solid) {
                                      border:@thickness @color @style;
                                    }

                                    -column(float:left) {
                                      float:@float;
                                      width:20%;
                                      -borderized(2px);
                                    }

                                    -widget(width:50%) {
                                      // You can define a variable
                                      // inside a function.
                                      @border-color:cyan;

                                      width:@width;
                                      float:left;
                                      -borderized(1px, 
                                                  @border-color, 
                                                  dotted);
                                    }

                                    .widget {
                                      -widget;
                                    }
                                    .column {
                                      -column;
                                    }
                                
Output
                                    .widget {
                                      width:50%
                                      float:left;
                                      // Taken from the -borderized 
                                      // function with modifications 
                                      // on color and style.
                                      border:1px cyan dotted;
                                    }

                                    .column {
                                      float:left;
                                      width:20%;
                                      // Taken from the -borderized
                                      // function
                                      border:2px red solid;
                                    }
                                

Function enables you to group code blocks and make them modular and reusable. Functions truly benefit the lazy.

Variables inside the function

Variables can be defined, used and modified inside a function. Variables are passed by value and not by reference. You can access global variables, arguments and in-function variable definitions only. Outside the function code block, any variables defined won't be accessible.

Example:

RCSS Try it
                                    // Global variables:
                                    @background:#cecece;

                                    // Function block: soften
                                    -soften(radius:20px) {
                                      // in-function variable definitions
                                      @color:#999;

                                      background:@background;
                                      border-radius:@radius;
                                      color:@color;
                                    }

                                    // Function block: headline
                                    -headline {                            
                                      color:@color;
                                      background:@background;
                                    }

                                    .widget {
                                      -soften;
                                    }
                                    h1 {
                                      -headline;
                                    }
                                
Output
                                    .widget {
                                      background:#cecece;
                                      border-radius:20px;
                                      color:#999;
                                    }

                                    h1 {
                                      // Variable not found.
                                      color:@color
                                      background:#cecece;
                                    }
                                

In the example above, any variable defined inside the function is encapsulated and can accessible only inside that code block. Thus, when the function -headline access the variable @color the system won't recognize its value. Unlike any global variable such as @background, it is fully accessible anywhere.

Traits

Ever wonder what if you can group functions and treat them something like an object (ala-object oriented programming). Trait is a product of a misconception about Object Oriented CSS. (I was imagining that OOCSS is some kind of programming style in which you can use the concept and methodology of OOP to CSS, sorry I wasn't reading enough) I took it literally and came up with a concept somehow similar to OOP and called — Traits.

Traits are function groups, more of a class (in OOP terms). It's comprised of variables (properties), and functions (methods) and can be treated like an object in OOP's perspective.

Syntax

Define Traits by using the @trait directive:

                            @trait TraitName as alias {
                              // Trait properties
                            }
                        

Let me break it down to you.

The TraitName is the name you want to call your Trait or function group. Imagine this is a class. It has to be unique. I prefer camel case of the name. Be descriptive so that it won't create confusion later on.

The alias is the name you want to use when you are to call and use the trait in your code. Imagine it as an object instance.

Trait is a collection of function encapsulated into one object. It behaves and acts like functions when called.

Scenario

In you project, you might want to group your functions base on their usage. You might have something that handles layout, structure and positioning.

Example:

                            // Center a container horizontally
                            -centered(top:0, bottom:0) {
                              margin:@top auto @bottom;
                            }

                            // Create column definition
                            -columnize(width:50%) {
                              float:left;
                              width:@width;
                            }

                            // Create a rounded corner
                            -soften(radius) {
                              border-radius:@radius;
                            }
                        

Functions are great. But once you have large number of functions, then comes the pain of maintaining them. Traits provide you a way to cluster and group these functions together. The code below converts the functions into Traits.

                            // Traits that handles structure and site layout
                            @trait Layout as layout {

                              // Function: centered
                              -centered(top:0, bottom:0) {
                                margin:@top auto @bottom;
                              }

                              // Function: handling column
                              -columnize(width:50%) {
                                float:left;
                                width:@width;
                              }

                            }

                            // Traits for handling styling
                            @trait Styling as style {

                              // Create a rounded corner
                              -soften(radius) {
                                border-radius:@radius;
                              }

                            }
                        

In the example above, we group functions that do positioning or layout into a trait we called as Layout and group styling functions into trait we called Styling.

To use it:

Syntax:
                            // No overriding or expanding definition
                            .strong @use alias.function;

                            // Traits with parameters
                            h1 @use alias.function(30px);

                            // Applying multiple traits with no expanding definition
                            h1 @use alias.function1(30px),
                                    alias.function2,
                                    alias2.function3;

                            // Traits with expanding definition
                            .widget @use alias.function {
                              // Define more style
                            }
                        

WTF? Confused? Let me break it down to you.

Traits with no expanding definition

If you want to use the default properties of a trait and don’t need to add more properties to your element, you can use trait with no expanding definition.

RCSS Try it
                                // Trait that handles formatting
                                @trait Formatting as format {

                                  // Strong point format style
                                  -strong-point {
                                    font-weight:bold;
                                    font-size:1.5em;
                                    display:block;
                                  }

                                }

                                // Usage
                                h1 @use format.strong-point;
                                
Output
                                h1 {
                                    font-weight:bold;
                                    font-size:1.5em;
                                    display:block;
                                }
                                

In the example above, h1 is using the trait Formatting for styling. If I don't need to add anything to h1's existing style, using a simple non-expanding format would give you the following code.

Take note the use of alias and the directive @use to instruct the system to use the trait property with alias format.

Traits with Arguments

Just like any function, you can define arguments to trait property.

RCSS Try it
                                    // Trait that handles formatting
                                    @trait Formatting as format {

                                      // Soften with radius
                                      -soften(radius:5px) {
                                        border-radius:@radius;
                                      }

                                    }

                                    // Usage
                                    .block @use format.soften;
                                    .block @use format.soften(10px);
                                
Output
                                    .block {
                                        border-radius:5px;
                                    }
                                    // Trait property was overridden
                                    // by the parameters
                                    .block {
                                        border-radius:10px;
                                    }
                                

Applying Multiple Traits

You can apply multiple traits to a given selector.

RCSS Try it
                                // Trait that handles formatting
                                @trait Formatting as format {

                                  // Soften with radius
                                  -soften(radius:5px) {
                                    border-radius:@radius;
                                  }

                                }

                                // Trait that handles widget styling
                                @trait Widget as widget {

                                  // Widget base styling
                                  -base(width:50%) {
                                    width:@width;
                                    background:#cecece;
                                    border:1px #222 solid;
                                  }

                                }

                                // Usage
                                .widget @use widget.base,
                                                          format.soften;

                                .widget @use widget.base(25%),
                                                          format.soften(2px);
                                
Output
                                .widget {
                                  width:50%;
                                  background:#cecece;
                                  border:1px #222 solid;
                                  border-radius:5px;
                                }

                                // Trait property was overridden 
                                // by the parameters
                                .widget {
                                  width:25%;
                                  background:#cecece;
                                  border:1px #222 solid;
                                  border-radius:2px;
                                }
                                

Traits with expanding definition

If you need to expand or add more property to a your selector with traits applied to it, you do that by expanding definition:

RCSS Try it
                                    // Trait that handles 
                                    // widget styling
                                    @trait Widget as widget {

                                      // Widget base styling
                                      -base(width:50%) {
                                        width:@width;
                                        background:#cecece;
                                        border:1px #222 solid;
                                      }

                                    }

                                    // Usage
                                    .widget @use widget.base {
                                      font-family:Helvetica, san-serif;
                                      line-height:1.2em;
                                    }

                                    .widget @use widget.base(25%) {
                                      font-family:Helvetica, san-serif;
                                      line-height:1.2em;
                                    }
                                
Output
                                .widget {
                                  width:50%;
                                  background:#cecece;
                                  border:1px #222 solid;
                                  font-family:Helvetica, san-serif;
                                  line-height:1.2em;
                                }

                                // Trait property was overridden 
                                // by the parameters
                                .widget {
                                  width:25%;
                                  background:#cecece;
                                  border:1px #222 solid;
                                  border-radius:2px;
                                  font-family:Helvetica, san-serif;
                                  line-height:1.2em;
                                }
                                

Variable inside the trait

A Trait is a self-contain function group. You can define variables that are accessible by all its trait functions. A trait function can access global variables, trait variable, and in-traits function variables only.

RCSS Try it
                                    // Trait that handles 
                                    // widget styling
                                    @trait Widget as widget {

                                      // Trait variable: width
                                      @width:50%;

                                      // Use the default width of the widget
                                      -base(width:@width) {
                                        width:@width;
                                        background:#cecece;
                                        border:1px #222 solid;
                                      }

                                    }

                                    // Usage
                                    .widget @use widget.base;
                                    .widget @use widget.base(200px);
                                
Output
                                .widget {
                                  width:50%;
                                  background:#cecece;
                                  border:1px #222 solid;
                                }

                                .widget {
                                  width:200px;
                                  background:#cecece;
                                  border:1px #222 solid;
                                }
                                

Here are some scoping considerations:

RCSS Try it
                                    // Global variable
                                    @background:#cecece;

                                    // Trait definition
                                    @trait Widget as widget {

                                      // Trait variables
                                      @width:200px;

                                      // Trait functions
                                      -base {
                                        // In-function variable
                                        @color:#4aae23;

                                        width:@width;
                                        background:@background;
                                        color:@color;
                                      }

                                      -compact {
                                        width:@width;
                                        background:@background;
                                        color:@color;
                                      }                        
                                    }

                                    // Usage
                                    .block @use widget.base;
                                    .block.compact @use widget.compact;
                                
Output
                                .block {
                                  width:200px;
                                  background:#cecece;
                                  color:#4aae23;
                                }

                                .block.compact {
                                  width:200px;
                                  background:#cecece;

                                  // @color variable will be 
                                  // unreachable because its
                                  // define inside a in-trait 
                                  // function code block -base.
                                  color:@color;
                                }
                                

Call function inside a trait

You can call and access functions inside a trait:

RCSS Try it
                                    // Non-trait function that
                                    // handles multi-vendor properties
                                    -vendor-prop(property-name, value) {

                                       -webkit-/@property-name/: @value;
                                          -moz-/@property-name/: @value;
                                            -o-/@property-name/: @value;
                                           -ms-/@property-name/: @value;
                                               /@property-name/: @value;

                                    }

                                    // Trait definition
                                    @trait Widget as widget {

                                      // Trait variables
                                      @width:200px;

                                      // Trait functions
                                      -base {
                                        // In-function variable
                                        @color:#4aae23;

                                        width:@width;
                                        background:@background;
                                        color:@color;
                                        // Call the function
                                        -vendor-prop(border-radius, 10px);
                                      }

                                    }

                                    // Usage
                                    .block @use widget.base;
                                
Output
                                .block {
                                  width:200px;
                                  background:#cecece;
                                  color:#4aae23;
                                  -webkit-border-radius:10px;
                                  -moz-border-radius:10px;
                                  -o-border-radius:10px;
                                  -ms-border-radius:10px;
                                  border-radius:10px;
                                }
                                

Call a trait within a trait

You can call other trait function inside a trait function:

RCSS Try it
                                    // Trait definition
                                    @trait Styling as style {

                                      -colorized {
                                        background:#222;
                                      }

                                    }

                                    @trait Widget as widget {

                                      // Trait variables
                                      @width:200px;

                                      // Trait functions
                                      -base {
                                        // In-function variable
                                        @color:#4aae23;

                                        width:@width;
                                        color:@color;
                                      }

                                      -subs {
                                        // Call a trait function
                                        widget.base;
                                        style.colorized;
                                      }

                                    }

                                    // Usage
                                    .block @use widget.subs;
                                
Output
                                .block {
                                  width:200px;
                                  color:#4aae23;
                                  background:#222;
                                }
                                

In the example above, you can call various trait functions inside any trait definition. Notice the change in syntax.

Syntax:

To call other trait function inside a trait, you need to use the dot notation instead of the default @use directive.

                            // Without parameters
                            alias.function;
                            // With parameters
                            alias.function(param);
                        

Q Can you call a variable as well? Quick answer NO. You can only access trait function when using this format. Variables inside a trait are not exposed so you can't use it. Or maybe next time?

Plugins

I know that I can't write everything and we know that good things come when people share ideas. That's why I develop the RCSS plugin architecture (sounds complicated but — no). Plugins in RCSS terminology are extended functions. They perform something beyond what CSS syntax can do. Runtime processing such as math is done via plugins. Code generations for CSS animation and @import are done via plugins.

Developed in PHP, plugin can be shared copied and use instantly in your code once installed.

Plugin extends the native capability of the RCSS engine providing richer features under its hood. (Notice: Even though you can develop extensions, you can't override any of the core processes or parsing mechanism of RCSS)

There are 3 types of plugins that can be added into RCSS: Initializers, Runtime and Post Processor.

Native Plugins

Because I don't want to clog the engine with various features that other may not use or know, I decided to stick with the essentials and focus on the core syntax of RCSS. Then if the need arises, I can just extend its capabilities by developing plugins.

Out of the box, RCSS has few plugins installed: Math, Import and CSS Animations. These native plugins are hard-wire to the core language syntax.

Math

Just like any other CSS processor, doing math inside CSS is really useful. Here are some examples on how you can use Math inside RCSS.

RCSS Try it
                                    // Basic Math operation
                                    .column {
                                      width:100%/2;
                                    }

                                    .padded {
                                      padding:10px+2;
                                    }

                                    // Variable with operation
                                    .column {
                                      @width:100%;
                                      width:@width/2;
                                    }

                                    // Shorthand operations
                                    .block {
                                      margin:20px 10px 0px 10px/2;
                                      padding:(2px 5% 5em 1em+2)*2;
                                    }
                                
Output
                                    // Basic Math operation
                                    .column {
                                      width:50%;
                                    }

                                    .padded {
                                      padding:12px;
                                    }

                                    // Variable with operation
                                    .column {
                                      width:50%;
                                    }


                                    // Shorthand operations
                                    .block {
                                      margin:10px 5px 0px 5px;
                                      padding:8px 14% 14em 6em;
                                    }
                                

The example above shows basic math operation you can do with RCSS. There are other math operations you can use. Why not experiment with these functions and see for yourself.

Here are the list of the math functions that you can use: sin, sinh, arcsin, asin, arcsinh, asinh, cos, cosh, arccos, acos, arccosh, acosh, tan, tanh, arctan, atan, arctanh, atanh, sqrt, abs, ln, log, floor, ceil, round

These functions can be used in various code points in RCSS. You can easily use it with variables, functions and traits.

Math plugin is an example of a runtime plugin.

Import

If you split your css into multiple files, you can call them easily using the @import directive.

Syntax
                            // For single CSS file include
                            @import cssfile.css;

                            // If you want to include multiple CSS files
                            @import globals.css, 
                                            functions.css,
                                            traits.css,
                                            site/base.css,
                                            site/skin.css;
                        

The line above opens and loads the css code before it fully compiles it. The files defined in the @import directive are relative to the file it's being called. The directory on where you store your CSS can be configured using config.php. @import is an example of an initializer plugins.

Initializers

Initializers are code generators or code loaders that you can use before RCSS parses and compiles your css.

Initializers are useful if you want to pre-load a particular code block to your existing code. It will inject its resulting code to the point on where the plugin is executed. If you want to build a grid base system that your user can just inject to their code, this is a good place to start.

Runtime

Runtime plugins are interpreted every time the system needs to evaluate a particular expression.

Runtime plugins are useful for value interpretation, evaluation or value processing. The math engine of RCSS is a built in function that evaluates an expression every time it encounters it. Color processing might be a good thing here.

Post Processors

Post Processors are executed at the end just before the engine spits out the final CSS code.

Post Processors process the compiled string buffer. It's good if one decided to manipulate the final string buffer before the engine displays the final css code.

Non-native Plugins

If you call functions as -function-name (using dash), plugins or extended functions can be called using --plugin-name with a double dash -- syntax.

Syntax
                            // Extended function for evaluating math expression.
                            --math(exp);
                            // Floor function expression
                            --floor(exp);
                        

Write your own Plugin

Due to the nature of this topic, I am dedicating a separate documentation for discussing this topic in details. So if you are interested in building some plugins, you can start reading the RCSS plugin architecture (TODO) documentation.

Nesting

The best part of any CSS pre-processor is nesting and inheritance.

Instead of writing long selector rules:

                            // Old-school CSS way of writing
                            .block { ... }
                            .block strong { ... }
                            .block strong span { ... }
                            .block a { ... }
                            .block a:hover { ... }
                        

You can write the same thing using nesting:

                            // CSS with nesting rules
                            .block {
                              strong { 
                                span { ... }
                              }
                              a {
                                &:hover { ... }
                              }
                            }
                        

Nesting enables you to write clear and concise code and it mimics you structure your DOM tree.

the '&' operator

By adding an &, you are in effect concatenating the nested selector to its parent instead of it acting as a descendant. Great for handling psuedo classes.

- Thanks LESS for the definition.

More example:

RCSS Try it
                                    .module {
                                      .padded {
                                        padding:10px;
                                      }

                                      strong {
                                        color:#cecece;
                                        background:#111;

                                        &.heavy { }
                                        span {}
                                      }
                                    }
                                
Output
                                    .module {}
                                    .module .padded {
                                      padding: 10px;
                                    }

                                    .module strong {
                                      color:#cecece;
                                      background:#111;
                                    }
                                    .module strong.heady {}
                                    .module strong span {}
                                

@extends directive

The @extends directives in RCSS is inspired by SASS and follow its known behavior.

                            .message,
                            .success-message,
                            .error-message {
                              font-size:1em;
                              padding:10px;
                              display:block;
                              margin-bottom:10px;
                            }

                            .success-message {
                              background:#dcf6e9;
                              color:#426955;
                            }

                            .error-message {
                              background:#f0d8d7;
                              color:#694542;
                            }
                        

In the example above, the properties of the selectors: .success-message and .error-message inherits their property to the selector .message.

To do that in RCSS, you can use the @extends directive:

RCSS Try it
                                    .message {
                                      font-size:1em;
                                      padding:10px;
                                      display:block;
                                      margin-bottom:10px;
                                    }

                                    .success-message {
                                      @extends .message;

                                      background:#dcf6e9;
                                      color:#426955;
                                    }

                                    .error-message {
                                      @extends .message;
                                      
                                      background:#f0d8d7;
                                      color:#694542;
                                    }
                                
Output
                                    .message,
                                    .success-message,
                                    .error-message {
                                      font-size:1em;
                                      padding:10px;
                                      display:block;
                                      margin-bottom:10px;
                                    }

                                    .success-message {
                                      background:#dcf6e9;
                                      color:#426955;
                                    }

                                    .error-message {
                                      background:#f0d8d7;
                                      color:#694542;
                                    }
                                

If you want to extend to multiple selectors, you can just add comma to each of the selectors you want to extend to.

                            .message {
                              @extends .notification, .system, p;
                            }
                        

Variable and Nesting

When variables are defined in a nested group, variable scoping are in total effect. By rule, the variable can be seen by its descendant but neither by its direct parent nor siblings. Let me break this down to you:

Variable and its Descendant

Descendants can see any variables defined by its parent. These variables can be defined via global scope or inside a nested group.

RCSS Try it
                                    // Global Variables
                                    @color:green;
                                    @background:#cecece;

                                    .module {

                                      // Variables defined by .module
                                      @padding:5px;

                                      color:@color;
                                      background:@background;

                                      .padded {
                                        padding:@padding;
                                      }

                                      strong {
                                        padding:@padding;
                                      }
                                    }
                                
Output
                                    .module {
                                      color:green;
                                      background:#cecece;
                                    }
                                    .module .padded {
                                      padding:5px;
                                    }
                                    .module strong {
                                      padding:5px;
                                    }

                                

In the example above both descendant (.padded and strong) can access the value of the parent variable: @padding and global variables: @color and @background

Until the value of the variable is not overridden by its parent, its value remains the same.

RCSS Try it
                                    // Global Variables
                                    @color:green;
                                    @background:#cecece;

                                    .module {

                                      // Variables defined by .module
                                      @padding:5px;

                                      color:@color;
                                      background:@background;

                                      // Override the color variable
                                      // Any access to this variable
                                      // for its descendant or children,
                                      // will remain red unless overridden
                                      @color:red;

                                      .padded {
                                        padding:@padding;
                                      }

                                      strong {
                                        color:@color;
                                        padding:@padding;
                                      }
                                    }
                                
Output
                                    .module {
                                      color:green;
                                      background:#cecece;
                                    }
                                    .module .padded {
                                      padding:5px;
                                    }
                                    .module strong {
                                      // The value of the global variable
                                      // has been overridden by its parent.
                                      color:red;
                                      padding:5px;
                                    }

                                

Notice how the color value of strong changes from green to red? It's because the parent of the selector strong overrides its value. So any access after that will use that modified value unless it has been change by any its children.

Variable and its siblings

Siblings don't share variable values. Any variable defined by a particular child won't affect the variable definition of any of its siblings

RCSS Try it
                                    // Global Variables
                                    @color:green;
                                    @background:#cecece;

                                    .module {

                                      // Variables defined by .module
                                      @padding:5px;

                                      color:@color;
                                      background:@background;

                                      .padded {
                                        // Change the value of the padding
                                        @padding:10px 15px;
                                        padding:@padding;
                                      }

                                      strong {
                                        padding:@padding;
                                      }
                                    }
                                
Output
                                    .module {
                                      color:green;
                                      background:#cecece;
                                    }
                                    .module .padded {
                                      // The value of the padded
                                      // is only affected
                                      // and not its direct sibling
                                      padding:10px 15px;
                                    }
                                    .module strong {
                                      padding:5px;
                                    }
                                

In the example above, only the variable change in .padded and its descendants are affected by the change and not its direct siblings strong nor its parent.

Media Query

RCSS has a different take on Media Query. You can write more descriptive statements to target the devices or resolution breakpoints you pre-define.

Before we start with our Media Query statements you need to define the media targets you'll use as reference. You can do that by:

Syntax
                            // Media Query Definitions
                            @def media {
                              // Target iPhone device
                              iphone {
                                max-width: 320px;
                              }
                              // Target iPad device
                              ipad {
                                max-width: 1024px;
                                min-width: 768px;
                              }
                            }
                        

You define the query targets by using the @def media directive followed by a descriptive name on what you want to specifically target.

In the example above, we have 2 following target devices — iPhone and iPad. The following codes enable the system to create a reference table that it will use later when you start accessing these device targets in your code.

Media target blocks

You can target media blocks by using the @on directive

Syntax
                            // In-block targeting
                            .body {
                                @on device-target { ... }
                            }
                            // block targeting
                            @on device-target {
                                .body { ... }
                            }
                            // If you want to target multiple device you can do that
                            // by adding comma
                            @on iphone, iphone-retina, ipad {
                                .body { ... }
                            }
                        

In-block targeting

In-block targeting is where you define media query blocks inside the selector.

RCSS Try it
                                    // Media Query Definitions
                                    @def media {
                                      // Target iPhone device
                                      iphone {
                                        max-width: 320px;
                                      }
                                      // Target iPad device
                                      ipad {
                                        max-width: 1024px;
                                        min-width: 768px;
                                      }
                                    }

                                    .body {
                                      background:#222;

                                      // style definition of body
                                      // on the iphone
                                      @on iphone {
                                        background:#fff;
                                        font-size:1.2em;
                                      }

                                      // on an ipad
                                      @on ipad {
                                        margin:10px;
                                      }
                                    }
                                
Output
                                    .body {
                                      background:#222;
                                    }
                                    @media screen and 
                                                 (max-width:320px) {
                                      .body {
                                        background:#fff;
                                        font-size:1.2em;
                                      }
                                    }
                                    @media screen and 
                                                 (max-width:1024px),
                                                 (min-width: 768px) {
                                      .body {
                                        margin:10px;
                                      }
                                    }
                                

Block targeting

You have the option of using the @on directive first. This means that the entire code block inside targets that specific device or resolution.

RCSS Try it
                                    // Media Query Definitions
                                    @def media {
                                      
                                      // Target iPad device
                                      ipad {
                                        max-width: 1024px;
                                        min-width: 768px;
                                      }
                                    }

                                    // Target the iPad device
                                    @on ipad {
                                      .body {
                                        background:#222;
                                        margin:10px;
                                      }
                                    }
                                
Output
                                    @media screen and 
                                                 (max-width:1024px),
                                                 (min-width: 768px) {
                                      .body {
                                        background:#222;
                                        margin:10px;
                                      }
                                    }
                                

Multiple device targeting

You can target multiple devices by adding comma to each of the targets you want to include. This would give you enough flexibility in your code to target selectors to a particular view without repeating yourself in the process.

RCSS Try it
                                    // Media Query Definitions
                                    @def media {
                                      // Target iPhone device
                                      iphone {
                                        max-width: 320px;
                                      }
                                      // Target iPad device
                                      ipad {
                                        max-width: 1024px;
                                        min-width: 768px;
                                      }
                                    }

                                    // Block targeting for
                                    // multiple devices
                                    @on ipad,iphone {
                                      .body {
                                        background:#222;
                                        margin:10px;
                                      }
                                    }
                                    // Inblock targeting for 
                                    // multiple device
                                    .block {
                                      @on ipad, iphone {
                                        padding:20px;
                                      }
                                    }
                                
Output
                                    .block {
                                    }
                                    @media screen and 
                                                 (max-width:320px) {
                                      .body {
                                        background:#222;
                                        margin:10px;
                                      }
                                      .block {
                                        padding:20px;
                                      }
                                    }
                                    @media screen and 
                                                 (max-width:1024px),
                                                 (min-width: 768px) {
                                      .body {
                                        background:#222;
                                        margin:10px;
                                      }
                                      .block {
                                        padding:20px;
                                      }
                                    }
                                

In RCSS, the whole code block is copied multiple times on various targets after everything is compiled. Why? Because its the simplest thing to do (I guess).

Using Traits

The @on directive works just like any other selectors. Meaning, you can apply traits the way you would use it to any of your selector.

RCSS Try it
                                    // Media Query Definitions
                                    @def media {
                                      // Target iPhone device
                                      iphone {
                                        max-width: 320px;
                                      }
                                      // Target iPad device
                                      ipad {
                                        max-width: 1024px;
                                        min-width: 768px;
                                      }
                                    }
                                    // Trait Definition
                                    @trait Layout as layout {
                                      // Wrapper function
                                      -wrapper {
                                        margin:10px;
                                        clear:overflow;
                                      }
                                    }

                                    // Inblock targeting for 
                                    // multiple device
                                    .block {
                                      // I apply the layout.wrapper trait
                                      // to this media query code block
                                      @on ipad,iphone @use layout.wrapper {
                                        padding:20px;
                                      }
                                    }
                                    // Doesn't work.
                                    @on iphone @use layout.wrapper {
                                    }
                                
Output
                                    .block {
                                    }
                                    @media screen and 
                                                 (max-width:320px) {
                                      .block {
                                        margin:10px;
                                        clear:overflow;
                                        padding:20px;
                                      }
                                    }
                                    @media screen and 
                                                 (max-width:1024px),
                                                 (min-width: 768px) {
                                      .block {
                                        margin:10px;
                                        clear:overflow;
                                        padding:20px;
                                      }
                                    }
                                

The code above shows you that you can apply traits onto an in-block definition.

NOTE: Traits won't work with @on directive on block targeting.

CSS Animation

CSS Animation in RCSS removes all the grueling code rewrites. Plus, it gives you access to all the various features available (variables, functions, extended functions/plugins and traits) — No bad right?

RCSS will provide you with the complete code scaffolding so you don't need to write long vendor specific code just to do simple animation.

Let's write a basic CSS animation:

RCSS Try it
                                    @keyframes move {
                                      from { top:0px; }
                                      to { top:100px; }
                                    }
                                
Output
                                    // RCSS automatically generates
                                    // the following code for you
                                    @keyframes move {
                                      from { top:0px; }
                                      to { top:100px; }
                                    }
                                    @-webkit-keyframes move {
                                      from { top:0px; }
                                      to { top:100px; }
                                    }
                                    @-moz-keyframes move {
                                      from { top:0px; }
                                      to { top:100px; }
                                    }
                                    @-o-keyframes move {
                                      from { top:0px; }
                                      to { top:100px; }
                                    }
                                

Animation with Variables / Functions / Plugins

Using variables, functions and plugins inside the @keyframes directive is easy.

Let's add some variables:

RCSS Try it
                                    @keyframes move {
                                      @origin:0px;

                                      from { top:@origin; }
                                      to { top:@origin+200; }
                                    }
                                
Output
                                    // RCSS automatically generates
                                    // the following code for you
                                    @keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-webkit-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-moz-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-o-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                

Functions anyone?

RCSS Try it
                                    // Go to position function 
                                    -goto(position, value) {
                                        /@position/:@value;
                                        position:absolute;
                                    }

                                    @keyframes move {
                                      @origin:0px;

                                      from { -goto(left, @origin); }
                                      to { -goto(left, @origin+200); }
                                    }
                                
Output
                                    // RCSS automatically generates
                                    // the following code for you
                                    @keyframes move {
                                      from { 
                                        left:0px; 
                                        position:absolute; 
                                      }
                                      to { 
                                        left:200px;
                                        position:absolute;
                                      }
                                    }
                                    @-webkit-keyframes move {
                                      from { 
                                        left:0px; 
                                        position:absolute; 
                                      }
                                      to { 
                                        left:200px;
                                        position:absolute;
                                      }
                                    }
                                    @-moz-keyframes move {
                                      from { 
                                        left:0px; 
                                        position:absolute; 
                                      }
                                      to { 
                                        left:200px;
                                        position:absolute;
                                      }
                                    }
                                    @-o-keyframes move {
                                      from { 
                                        left:0px; 
                                        position:absolute; 
                                      }
                                      to { 
                                        left:200px;
                                        position:absolute;
                                      }
                                    }
                                

Animation with Traits

Just like your selector you can use Traits with your key frames.

RCSS Try it
                                    // Animation Helper trait
                                    @trait AnimationHelper as a {

                                      // Move function 
                                      -moveto(position,value) {
                                        /@position/:@value;
                                      }
                                    }

                                    @keyframes move {
                                      @origin:0px;

                                      from @use a.moveto(left, @origin);
                                      to @use a.moveto(left, @origin+200);
                                    }
                                
Output
                                    // RCSS automatically generates
                                    // the following code for you
                                    @keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-webkit-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-moz-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                    @-o-keyframes move {
                                      from { top:0px; }
                                      to { top:200px; }
                                    }
                                

CSS Animation Plugin

RCSS CSS Animation plugin is basic in its implementation. It accepts css animation arguments then produce a short hand version of the css animation call.

After defining your key frames you can call the animation frames by using the CSS animation plugin

Syntax

Below are the full arguments list of the animation plugin.

                            --animate(name, duration, easing, delay, iteration, direction);
                        

The animate plugin can also accept variables for arguments.

                            @time:50+100;
                            // Interpolated variables for time
                            --animate(move, /@time/s);
                        

To apply to your code:

RCSS Try it
                                    // Move the block
                                    .block {
                                        --animate(move, 10s);
                                    }
                                
Output
                                    // RCSS automatically generates
                                    // the following code for you
                                    .block {
                                        animation:move 10s;
                                        -webkit-animation:move 10s;
                                        -moz-animation:move 10s;
                                        -o-animation:move 10s;
                                    }
                                

Q & A

This section is intended to answer my questions, your issues and things you might want to ask...

  • There are number of available CSS processors around, why did you create one?

    The answer is, Why not? I know that this space might be saturated by prefered language of developers and designers, but there is no rule that you can't join them. You might not like it, that's totally fine. But feel free to try it.

    I'm not against other PHP based CSS processor but I want to combine what LESS and SCSS has done and add my own flavor to it.

  • Will this solve my CSS problem and be a great front-end developer/designer?

    To be honest, I don't know. I have few suggestions. Learn the fundamentals before jumping to stuff like this. This is not a silver bullet. If you don't know how to manage an old-school css code, there is a possibility you will be hurting yourself more. It's better to know the basic of a good css code before doing and actually using tools like this.

    Spear yourself from headache.

  • The system is buggy. I hate it.

    That's why I have this on beta right? Because before I publicly release it, I want to make sure I covered the basics.

    If there are bugs, or the code you provided doesn't match the output you expect, please let me know by emailing me. By doing that you are helping me improve the system.

  • Is this documentation complete?

    Well, its complete but there are some details that needed to be fully documented.

  • I have some suggestions, what should I do with them?

    You can send me an email, and I'll see what I can do.

  • When are you going to release it?

    Once I revalidated and sort out all the major issues that will be submitted to me during the beta testing.

  • I want to use it to my project, how can I do that?

    Send me an email, I'll send you the zip file for you to personally try it.

Download

Because this engine is in private beta, we are limiting the number of people who can download it. But if you are interested in participating, please do email me so that I can send the link for you to test it yourself.