Sass笔记
1.变量
$c1:#fff;
//声明c1
.home{
Color:$c1;
}
2.嵌套
①
Nav{
A{
Color:$c1;
}
//改变选择器的顺序,将&后置,将当前的选择器提到父级
Header &{
Color:$c2;
}
}
等价于
Header nav a{
}
②
.box{
Border:{
top:1px solid #000;
Bottom:2px solid #000;
}
}
③
.home{
&::befor{
Color:$c1;
}
&:hover{
Color:$c2;
}
}
3、Mixin\extend
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
大括号里面是复用的样式代码。
带参数混合宏:
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
用include调用
Button{
@include border-radius;
}
.btn{
Border:1px solid #000;
}
//继承
.home{
Background:#ccc;
@extend .btn;
}
%m5{
Border:1px solid #000;
}
//占位符
.home{
Background:#ccc;
@extend %m5;
}
.btn-#{$color} {
@include button-variant($value, $value);
}
在字符串中引用变量就得#{$变量}
input[type="submit"]
这种用法
p::after { content: "#{length($colors)}";
// 5 color: nth($colors, 1); // #fff}
从1~length
单行注释不会被编译进css中 但是多行注释如果位置写的不对也不会被编译进css中
sass
最新推荐文章于 2022-09-27 11:12:38 发布