commom.scss

变量声明

$info:blue; $error:pink;

声明函数 mixin混入

@mixin border-radi { -webkit-border-radius: 50%; -moz-border-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:red) { border: $w $s $c; }

sass.scss

导入的语法是链接本地的不能用url，直接用""

@import "./common.scss";

@include 引用函数

` body{ button{ color: error; @include border-radi; // 不指定参数名，按顺序 @include border(2px,solid); } a{ color: error; @include border-radi; }

ul{
    @include h-ul;
    // 指定参数名，可以不按顺序
    @include border($w:1px,$s:dotted,$c:red);
}

// 继承
div{
    border: 1px solid red;
    background-color: aqua
}

span{
    @extend div;
    font-size: 20px;
    background-color: transparent;
}
复制代码
复制代码

} `

sass.html

引入css <link rel="stylesheet" href="./css/sass.css">

html body内容 `

按钮超链接

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

作者：余苏益
链接：juejin.cn/post/704104… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

12.10