1.混合器
混合器使用@mixin标识符定义 混合器的定义:@mixin 混合器的名称{代码}
@include调用
(1) 不带参数的混合器:
例;
@mixin a_0 {
text-decoration: none;
font-family: "微软雅黑";
font-size: 18px;
width: 200px;
height: 50px;
}
.nav{
color: red;
display: inline-block;
@include a_0();
}
.list{
color: green;
@include a_0()
}
<body>
<div class="div_0">
<a href="#" class="nav">这是一个链接</a>
<a href="#" class="list">这是一个链接</a>
</div>
</body>
效果:
(2)带参数的选择器
例:
@mixin wb {
width: 100px;
height: 50px;
border-radius: 10px;
}
@mixin one($a,$b,$c,$d) {
background-color: $a;
border: $b solid $c;
color: $d;
}
//给混合器默认值
@mixin one_1($a,$b,$c,$d:green) {
background-color: $a;
border: $b solid $c;
color: $d;
}
.div_1{
@include wb;
// @include one(red, 1px, yellow,pink);
@include one_1(red,2px ,yellow);
}
.div_2{
@include wb;
@include one(yellow,1px,red,pink);
}
<body>
<input type="button" value="文字" class="div_1">
<input type="button" value="文字" class="div_2">
</body>
效果:
2.何时使用混合器
如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成优良的混合器,
3.继承的使用
继承应用:@extend
%占位符
// %占位符
.btn {
width: 100px;
height: 50px;
border-radius: 10px;
}
.div_1{
@extend .btn;
background-color: gainsboro;
border: 2px solid gray;
}
.div_2{
@extend .btn;
background-color: rosybrown;
border: 2px solid red;
}
.div_3{
@extend .btn;
background-color: greenyellow;
border: 2px solid green;
}
<body>
<input type="button" value="文字" class="btn div_1">
<input type="button" value="文字" class="div_2">
<input type="button" value="文字" class="div_3">
</body>
效果:
4.sass运算符的使用
数字运算符:+ - * / % 百分号不能与单位进行计算,会报错
关系运算符:> < >= <=
逻辑运算符:and or not
scss:
p{
//加
width: 1+3;
width: 10+20%;
width: 20+40px;
}
span{
//减
width: 20-10;
width: 20-10px;
width: 10-5%;
}
效果:css
p {
width: 4;
width: 30%;
width: 60px;
}
span {
width: 10;
width: 10px;
width: 5%;
}
4.1运算符 / :1.用作数学运算 2.分隔符
1.用作分隔符时 例:
border-radius: 10/20; //当两个单位用/进行运算 / 是分隔符
2. / 用作数学运算时 例:
//当变量与数字用/连接,此时/代表运算符
$num_1:1000px;
$num_2:20;
border-radius: $num_1/$num_2;
//或加括号
border-radius: (10/5);
//或
border-radius: 10+10/5;
3.
sacc:
b{
//当不想让变量之间进行除法运算时 可以使用插值语句#{变量名}
$num_3:10px;
$num_4:20px;
border-radius: #{$num_3}/#{$num_4};
&::after{
content: "aa"+bb;//此时+表示连接符
}
$num_3:100;
$c:red;
@if $num_3>200 and $c=="red"{
background-color: blue;
}@else{
background-color: red;
}
}
css效果
b {
border-radius: 10px/20px;
background-color: red;
}
b::after {
content: "aabb";
}
5.1 sass常见函数的基本使用
Color(颜色函数)
Sass包含很多操作颜色的函数。
lighten() 与 darken()函数可用于调亮或调暗颜色
opacify()函数使颜色透明度减少
transparent()函数使颜色透明度增加
mix()函数可用来混合两种颜色。
String(字符串函数)
Sass有许多处理字符串的函数。
向字符串添加引号的quote()
获取字符串长度的str-length()
将内容插入字符串给定位置的str-insert()
Math(数值函数)
数值函数处理数值计算。
percentage()将无单元的数值转换为百分比
round()将数字四舍五入为最接近的整数
min()和max()获取几个数字中的最小值或最大值
random()返回一个随机数。
List函数
List函数操作List。
length()返回列表长度
nth()返回列表中的特定项
join()将两个列表连接在一起
append()在列表末尾添加一个值。
Map函数
Map函数操作Map。
map-get()根据键值获取map中的对应值
map-merge()来将两个map合并成一个新的map
map-values()映射中的所有值。
selector选择器函数
选择符相关函数可对CSS选择进行一些相应的操作。
selector-append()可以把一个选择符附加到另一个选择符
selector-unify()将两组选择器合成一个复合选择器。