stylus 语法

css预处理器

变量

css使用

#box{
    width: 100%;
    height: 100%;
    font-size: 16px;
}

stylus使用

#box
    width: 100%
    height: 100%
    font-size: 16px

继承 @extend

css使用

.fRSpace,
#content{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#content{
    color: #333;
}

stylus使用

.fRSpace /*伸缩盒*/
    display: flex
    flex-flow: row nowrap
    justify-content: space-between
#content
    @extend .fRSpace
    color: #333

定义函数 vendor()

css使用

.btn{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.bg{
    background: url("../img/16.jpg") no-repeat center center;
    background-size: contain;
}

stylus使用

/** 
 * 半径
 * vendor('border-radius',5px)
 * vendor('box-shadow',0px 0px 1px 2px #333)
 * vendor('transform',translate(-50%,-50%))
 */
vendor(prop, n)
    -webkit-{prop}:n
    -moz-{prop}:n
    -ms-{prop}:n
    -o-{prop}:n
    {prop}:n
.btn
    vendor('border-radius',5px)
/*背景图*/
background(src,repeat,position,size)
    background:url(src) repeat position
    background-size:size
.bg
    background("../img/16.jpg",no-repeat,center center,contain)

媒体 @media

css使用

@media screen and (min-width: 769px) and (max-width: 992px){
    #app{
        width: 100%;
        background-color: red;
    }
    #box{
        display: hidden;
    }
}

stylus使用

@media screen and (min-width: 769px) and (max-width: 992px)
    #app
        width: 100%
        background-color: red
    .appTop
        display: hidden

作者 wendy
2018 年 12月 14日

参考文献

stylus
stylus参考文档