Sass的使用

common.scss 页面

$info:blue;
$error:red;

//声明函数
@mixin border-radius {
    -webkit-border-radius:50%;
    -moz-bordaer-radius:50%;
    border-radius: 50%;
}
//嵌套
@mixin  h-ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    li{
        list-style: none;
    }
}
//参数 (可带默认值)
@mixin border($w,$s,$c:blue){
   border: $w $s $c;
}
html{
    margin: 0;
}

sass.scss 页面

@import "./common.scss";//导入的语法
body{
    button{
color: $error;
@include border-radius;
@include border(2px,solid,red)
    }
    a{
        @include border-radius;
    }
    ul{
        @include h-ul;
        @include border($c:red,$w:2px,$s:dotted);
    }
    div{
        border: 1px solid red;
        background-color: red;
    }
    span{
        @extend div;
        font-size: 20px;
        background-color: transparent;
    }
}