sass补充（2019-3-9）
2024-04-14 19:01:37
@each 输出
格式:
@each $var in value，value1,value2{
}
eg:
@each $var1 in 100px,200px,300px{
.box{
width:$var1;
}
}
//结果
.box{
width:100px;
}
.box{
width:200px;
}
.box{
width:300px;
}
当然，@each的变量还可以写多个，不过要和后面的内容向对应。
@each $a,$b,$c in ((ab,es,cdd),(cd,da,add)){
.a{
background: $a;
color:$b;
width: $c;
}
}
//结果
.a {
background: ab;
color: es;
width: cdd;
}
.a {
background: cd;
color: da;
width: add;
}
@while 循环输出内容
格式：
@while $a>0{}
eg:
$i:5;
@while $i > 0{
.box{
background: $i;
}
$i:$i - 1;
} //结果 .box {
background:;
} .box {
background:;
} .box {
background:;
} .box {
background:;
} .box {
background:;
}
混合开发@mixin
eg：
// @mixin 混合引用
$num1:10;
@mixin txt{
font:{
size:$num1+px;
weight:$num1*10;
};
color:#fff;
&:hover{
display: none;
}
} // 直接使用不能在里面加父选择器
.pd{
@include txt();
width: 100%;
} @mixin txt2{
.box{
font:{
size:10px;
}
z-index: $num1*100;
}
} @include txt2(); // 混合模式的参数设定 @mixin txt3($var1,$var2){
.#{$var1}{
background: $var2;
}
} @include txt3(box,url("img/1.png")); // 混合模式参数的默认值 @mixin txt4($var1:div,$var2:#fff){
.#{$var1}{
color: $var2;
}
} @include txt4(xxx,#121212);
混合开发案例结果
.pd {
font-size: 10px;
font-weight:;
color: #fff;
width: 100%;
}
.pd:hover {
display: none;
}
.box {
font-size: 10px;
z-index:;
}
.box {
background: url("img/1.png");
}
.xxx {
color: #121212;
}
最新文章
- Spring配置文件解析--集合注入方法
- Go中简单的文件读写
- jquery checkbox获取多个选项
- CentOS 6.4源码编译安装httpd并启动测试
- FMDB事务的使用
- css3动画结束捕捉事件整理
- php hook编程机制
- Oracle_安装说明
- Markdon 作图语法 CSDN
- [FQ]Tor + Chrome + PAC 尝试 FQ
- 5. Java中序列化的serialVersionUID作用
- 3530: [Sdoi2014]数数
- 东北育才 NOIP模拟赛第1场
- 设置GO环境变量
- fastdfs5.11+centos7.2 按照部署（一）【转载】
- oppo R9 WLAN使用代理图解
- openssl安装相关软件
- 微信小程序-腾讯地图显示偏差问题
- Xamarin.Forms 调用 腾讯地图SDK
- shell之小知识点