document

More is a CSS preprocessor elaborately devoting to brevity and a light implementation，which doesn't alter CSS specification, ensuring the same execution and the same line number of the converted codes.

Nested rules

More supports the nested CSS selectors, which is easy to write and read, and strictly guarantees the consistent line number and style for debugging.

.outer {
  margin: 0;
  .inner {
    padding: 0;
  }
}

compiles to

.outer {
  margin: 0;
  }.outer .inner {
    padding: 0;
  }
 

Variables

Both @ and $ can be used to declare the variables, but $ is recommended, since @ is a resevered word in CSS. It is noteworthy that More provides the config interface to access the public global varibles.

$a: 1;
@b: 'Verdana';
div {
  margin: $a;
  font-family: @b, "@b", "${b}";
}

compiles to

 
 
div {
  margin: 1;
  font-family: 'Verdana', "Verdana", "Verdana";
}

Extends

You can use multiple inheritance and nested inheritance in More.It does not require special written style of selector (space-insensitive), supports deep inheritance (including sub-selectors and pseudo-objects, etc.). Nested inheritance is processed according to the order of appearance. The keyword @extend can be omitted for Less compatible, but it is not recommended.

.father {
  margin:0;
  .inner { padding: 0; }
}
.child {
  @extend .father;
}
.child2 {
  @extend .father .inner;
}

compiles to

.father {
  margin:0;
  }.father .inner { padding: 0; }
 
.child {
  margin:0;
}
.child2 {
  padding: 0;
}

Mixins

fn() {
  margin:0
}
$fn2($v) {
  padding:$v
}
$fn3($v) {
  $v
}
body{fn();$fn2(1);$fn3(*background:#FFF);color:$fn3(#FFF)}

compiles to

body{margin:0;padding:1;*background:#FFF;color:#FFF}

The arguments can be one of css value | style block | css style, but not selector.

Single line comments

//This is comment

Operations

$a:1;
$b:$a + 1px;
$c:$b * 50%;
$d:($c + 2pt);
a{margin:$a $b $c $d}

compiles to

a{margin:1 2px 3px 3pt}

Conditional Statement

use if and else:

@if($a) {
  div{margin:$a}
}
@elseif($b) {
  div{margin:$b}
}
@else {
  div{margin:0}
}

Loop Statement

for, for in, for of:

@for($i = 0; $i < 10; $i++) {
  .icon-$i{margin:$i}
}
@for($i in [1,2,3]) {
  .icon-$i{margin:$i}
}
@for($i of [1,2,3]) {
  .icon-$i{margin:$i}
}

Built-in Function

basename、extname、dir、width、height:

$a = @basename('icon.png');
$b = @extname('icon.png');
$list = @dir('./img/*.png');
$w = @width('./1.png');
$h = @height('./1.png');

Syntax Enhanced

VARDECL
  $VAR : [ ITEMLISTopt ]
  $VAR = [ ITEMLISTopt ]

ITEMLIST
  ITEM
  ITEM ,

ITEM
  STYLE
  VALUE

VARSTMT
  VARDECL
  VARDECL ,
  VARDECL ;

EQSTMT
  RELSTMT
  RELSTMT == RELSTMT
  RELSTMT != RELSTMT

RELSTMT
  ADDSTMT
  ADDSTMT > ADDSTMT
  ADDSTMT < ADDSTMT
  ADDSTMT >= ADDSTMT
  ADDSTMT <= ADDSTMT

ADDSTMT
  MTPLSTMT
  MTPLSTMT + MTPLSTMT
  MTPLSTMT - MTPLSTMT

MTPLSTMT
  POSTFIXSTMT
  POSTFIXSTMT * POSTFIXSTMT
  POSTFIXSTMT / POSTFIXSTMT

POSTFIXSTMT
  PRMRSTMT
  PRMRSTMT ++
  PRMRSTMT --

PRMRSTMT
  $var
  number
  string
  ( EQSTMT )
  ARRLTR

ARRLTR
  [ ITEMLISTopt ]