¶

This is a Css framework written in javascript.

For now only the parser will be presented, i’m actually working on it, and then will work on a web gui.

What mean dryCss

DRY is an acronym meaning Dont’t Repeat Yourself.
If you’re looking at this page i suppose that you already know what Css stand for.

What is it ?

This is a tool to assist you in creating css quicker.

What about the syntax

The syntax is evolving as this project is under heavy development at the moment.

Comments

multiline C style comments as in normal CSS files is supported

single line comments starting with a // is also supported but only when at the begining of the line ( leading spaces are ignored )

External file imports

• you can import other files as in normal css using `@import style.css;`
• You may also import file directly inside the current document by doing a `@!import style.dss;` (dss is the common dryCss file extension)

Variables

You can declare variable like this:

@red:#FF0000;

and use it anywhere in your code like this:

.red{ color:@red; }

Nested code

As in most of similar tool you can nest your rules declaration so you can do something like that:

a{
  text-decoration:none;
  color:blue;
  // ":pseudo" class are detected and the result will be "a:hover" 
  :hover{
    text-decoration:underline;
  }
  // prefixing the rule with a "!" allow rendering of "a.red" instead of "a red" 
  !.red{
    color:@red;
  }
  /* this one will result in "a span" 
     and "span, !.red" would give us "a span, a.red" */
  span{
    font-size:1.1em;
  }
}

Which will be rendered as

a{
  text-decoration:none;
  color:blue;
  font-weight:bold;
}
a:hover{
  text-decoration:underline;
}
a.red{
  color:#FF0000;
}
a span{
  font-size:1.1em;
}

Please note the usage of ! to make the nested rule extending the parent one instead of pointing to a child element.

Variables Rules also named Mixins

You may also use define some complete rules as variable we then will call them mixins here is a sample of mixin:

@myMix{
  margin:0;
  padding:0;
  !.big{
    font-weight:bold;
    font-size:1.1em;
  }
}
span{
  @:@myMix;
}
div{
  @!:@myMix;
}

Which will be rendered as:

span{
  margin:0;
  padding:0;
}
div{
  margin:0;
  padding:0;
}
div.big{
  font-weight:bold;
  font-size:1.1em;
}

Please note how we import them inside our rules…

• @: make a simple import of the mixin himself but not the nested rules
• @!: make a deep import so it import the nested rules too. Thoose may not only used to import mixins but also previously declared rules and even a rule property so you may do something like this:

div{
  @:a span;
  font-weight:@:div.big[font-weight];
}

to get this:

div{
  font-size:1.1em
  font-weight:bold;
}

Functions

In fact thoose are not really function but more like mixins with parameters, here’s a little example:

@=border(style=solid,color=silver,weight=1px){
  border:@style @color @weight;
}
.box{ @=border(); }
.boxred{ @=border(,red); }

This should give you something like this:

.box{
  border:solid silver 1px;
}
.boxred{
  border:solid red 1px;
}

Note on parameters in declaration

As you can see we can assign default values for parameters but this is not an obligation we also may assign empty values as default so writing @=func(param1,param2=){} will result in param1 to be mandatory and param2 to be optional and get assigned an empty string as default value.

Note on parameters at call time

As you can see in previous example, we can skip a value to simply use the default parmater value so doing @=border(,red); result in first parameter to take the solid value. If we want to pass an empty value to the first parameter we should do it like this: @=border("",red);

Expressions

Some simple conditional expressions and maths operations can be perform by encapsultating them inside an evaluation block [ stuff to eval ]

Maths expressions

simple maths expresssions can be performed inside an evaluation, complex expressions (understand with multiple operators like a+b+c) just don’t work out of the box you must encapsultate each expressions inside multiple evaluation blocks.

Units are partially supported inside such expressions but no conversion will be done between units so adding some ‘em’ with some ‘px’ will only results by keeping the first unit encountered so in this case all values will be considered as ‘em’

supported operators are +-/∗

Here’s some example

.testAdd{ width:[10+10]px; }
.testAddUnit{ width:[10px+10em]; }
.testMultipleOps{ width:[5*[10/100]]%;}

will result in:

.testAdd{ width:20px; }
.testAddUnit{ width:20px; }
.testMultipleOps{ width:0.5%;}

Maths expressions may also apply to HEX colors values like #RGB or #RRGGBB. Each operand of the expressions may be a HEX color and/or an int or float value.

Comparison expressions

Simple comparison expressions are possible using a ternary operator like this: [ a ? b , c ] if a is not empty (any value other than a blank string) then b is returned else c is returned, b is not mandatory and may be ommited.

the evaluated expression (the a part in [ a ? b , c ]) may contain comparison operators: >, >=, <, <=, ==, !=, ===, !=== with the addition of AND (&&), and OR (||) operators.

State of the project

• I’m also asking myself about rewriting the whole parser, but my current attempts to do so just make me going nowhere (at least not where i want to go) so this is always something possible but i’ll make sure to make the syntax compatible.
• I’m actually using it in my current job on a daily basis and it make my life easyer. I’m actually thinking about a way to propose a complete tool accessible from the web based on the parser as it permits to make your css directly inside your browser without refreshing the pages. And be sure that it really make me work faster!

Hoping this crazy little thing may help someone else, i wish you an happy css making, regards,

Malko