CSS Grace syntax design

cssgrace-syntax.css

/**
 * extend  全局继承
 * extend 会合并选择器，不会生成冗余代码。
 * 1. extend: select() [ , select() ]* 继承选择器与其中的声明 http://tabatkins.github.io/specs/css-toggle-states/#toggle-group-property
 * 2. extend: <custom-ident> [ , <custom-ident> ]*   作为 Placeholder，只继承声明，default 为保留关键字

 * inherit(property [ , property ]*)  局部继承
*/

/* input */
.foo > h1 {
  height: 300px;
  margin: 10px;
  padding: inherit(height, margin);
}

.bar {
  extend: select(.foo > h1);
}

/*自定义一个 Placeholder
 * @placeholder 'gray' 可以加引号
 */
@placeholder gray {
  color: gray;
}

.text {
  extend: gray;
}
 
 
/*output*/
.foo > h1,
.bar {
  height: 300px;
  margin: 10px;
  padding: 300px 10px;
}
 
.text {
  color: gray;
}

/**
 * mixin
 @mixin <custom-ident>[(<custom-ident>*)] {
   declarations
 }
 */
 
 @mixin border-radius(n) {
    -moz-border-radius: n;
    border-radius: n;
 }
 .foo {
   border-radius: 5px;
 }
 /* output */
 .foo {
   -moz-border-radius: 5px;
    border-radius: 5px;
 }

/**
 * @browser (39 >= version >= chrome 30) {
   Do something
 }
 .foo {
   browser: ie6, >= chrome 30;
 }
 */
 
 /*input*/
.foo{
  /* 生成一个图片作为占位图 */
  background: image(#999, png);
  image-size: 200px 300px; /* 图片尺寸 */
  image-text: '200x300'; /* 图片中文字 */
}


/*output*/
.foo{
  background: url(..tmp/200x300#999$200x300.png); /* 生成一个图片作为占位图 */
}

/* image sprites*/

/*input*/
.bar {
  background-image: image('sprites.png#xywh=10,30,60,20');
}

/*output*/
.bar {
  background-image: url(sprites.png);
  width: 60px;
  height: 20px;
  background-position: 10px 30px;
}
.