stylus语法

Posted 2020-10-10 照世明灯

stylus 支持缩进写法

h1
    color: #ffaff;

变量

/*定义变量*/
maincolor = #090032
siteWidth = 1024px
borderStyle = dotted

body
    color maincolor
    border 1px borderStyle mainColor
    max-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";

body
    color:red
    font-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;
body
    margin:0 auto;
    width:siteWidth;
.content
    float:left;
    width:siteWidth - (sidebarWidth+gutterWidth);

.sidebar
    float:left;
    margin-left:gutterWidth;
    width:sidebarWidth;