前端

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=".sss.css">
html body内容
`

按钮
超链接\

\     
• 列表1\     
• 列表2\     
• 列表3\