# styl简单使用
# 安装Stylus
cnpm install stylus -g
# 统一变量
//main.styl
// 基调颜色
$blue=#61AEDC
//常用色
$morecolor=#415E77
$grey=#868A8D
$white=#ffffff
// 右侧的宽度
$rwidth=380px
//省略号
ellipsis()
overflow:hidden
text-overflow:ellipsis
white-space:nowrap
// input框
// 宽度 高度 圆角 颜色
inputs(width,height,radius=0)
border none
outline none
width width
height height
border-radius radius
// div宽 高 圆角 背景色
divs(width,height,radius=0,back=#FFF)
width width
height height
border-radius radius
background back
# 应用
@import "../../static/styl/main.styl"
#index
height 100%
.sections
height calc(100% - 66px)
width 100%
display flex
.main-left
width:calc(100% - 400px)
height 100%
.main-left-bottom
height 100%
.left-all
width:100% !important
.main-right
divs(400px,100%,0,#F3F3F3)
#prompt
position: absolute
top: 150px
left: 50%
width: 200px
margin-left: -(@width / 2)
//Stylus属性访问提供对当前块中定义的值的轻松访问。只需在属性名称前面加上“@”即可引用该值。
#prompt
position: absolute
top: 150px
left: 50%
width: w = 200px
margin-left: -(w / 2)
//styl还可以定义变量，然后直接用算法
#prompt {
position: absolute;
top: 150px;
left: 50%;
width: 200px;
margin-left: -100px;
}