@mixin h-ul { display: flex; justify-content: space-between; align-items: center;// li{ list-style: none; } }
// 给混合器传入参数 @mixin border($w,$s,$c) { border: $w $s $c; }
// 解决错误 html{ margin: 0; }
嵌套
// body{
//
// a{
// text-decoration: none;
// }
// a:hover{
// color: red;
// }
// }
// $color:#eee;
// $font-size:14px;
// // sass的声明使用$符号
// body{
//
// height: 300px;
// button{
// font-size: $font-size;
// }
// a{
// text-decoration: none;
// // 取父元素
// &:hover{
// color: red;
// }
// }
// }
$info:blue;
$error:pink;
// 嵌套
// 声明函数/混入 可以嵌套其他东西 把相同的属性加入
@mixin border-rad {
border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
@mixin h-ul { display: flex; justify-content: space-between; align-items: center;// li{ list-style: none; } }
// 给混合器传入参数 @mixin border($w,$s,$c) { border: $w $s $c; }
// 解决错误 html{ margin: 0; }
@mixin h-ul { display: flex; justify-content: space-between; align-items: center;// li{ list-style: none; } }
// 给混合器传入参数 @mixin border($w,$s,$c) { border: $w $s $c; }
// 解决错误 html{ margin: 0; }