stylus语法

stylus 支持缩进写法

h1color: #ffaff;

变量

/*定义变量*/
maincolor = #090032
siteWidth = 1024px
borderStyle = dottedbodycolor maincolorborder 1px borderStyle mainColormax-width siteWidth

嵌套写法

nav {ul {margin : 0;padding:0;}li {display: inline-block;}a {display:block;padding:6px 12px;text-decoration:none;}
}
转为css后格式为
nav ul{}
nav li{}
nav a{}                                           

运算符

margin:(14px/2);
top:50px+100px;
right:80*10%

 

样式表文件合并导入

/*base.styl*/background:#000;
font-famliy:'Microsoft YaHei';导入base.css或 .styl文件 到bbb.styl
@import "base.css";
@import "filename.styl";bodycolor:redfont-size:18px

样式继承

当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法.
.common {border:1px solid #ccc;padding:10px;color:#333
}.success {@extend .common;color:#0ff;
}
.error{@extend .common;color:#f00;
}

混入（函数）

error(borderWidth = 2px) {border:borderWidth solid #f00;color:#f00
}
.generic-error{padding:20px;margin:4px;error();
}
.login-error{left:12px;position:absolute;top:20px;error(5px);
}

弹性列 样式计算器

弹性列
siteWidth =1024px;
gutterWidth=20px;
sidebarWidth=300px;
bodymargin:0 auto;width:siteWidth;
.contentfloat:left;width:siteWidth - (sidebarWidth+gutterWidth);.sidebarfloat:left;margin-left:gutterWidth;width:sidebarWidth;

 Font-face

 

@font-facefont-family borsfont-style normalsrc url(fonts/bors/boraz.ttf).bs font-family bors

 

@media

　

@media screen and (min-width:600) bodybackground:#000

 

@keyframes

@keyframes myanimate 0%width:50px100%width:120px