Skip to content

Instantly share code, notes, and snippets.

@yisibl yisibl/cssgrace-syntax.css

Last active Aug 29, 2015
Embed
What would you like to do?
CSS Grace syntax design
/**
* 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;
}
.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.