sass css样式：@for循环、样式变量与#{} 变量插值
2024-10-08 08:37:33
/* sass 可以用写JS的思想来写CSS代码
* #{}
用来插值，大括号中填写需要插入的变量
* @for 变量 from 1 through 9
从1到9循环
* $sizei
定义一个变量 值为 $i * 7.5
* .myposition0#{$i}0#{$j}
class类名中插入变量值
//作用举例：定位大量规律增减的 top left值
@for $i from 1 through 9 {
$sizei : $i * 7.5;
@for $j from 1 through 9 {
$sizej : $j * 7.5;
.myposition0#{$i}0#{$j}{
top : #{$sizei}vw;
left : #{$sizej}vw;
}
}
@for $n from 10 through 11 {
$sizen : $n * 7.5;
.myposition0#{$i}#{$n}{
top : #{$sizei}vw;
left : #{$sizen}vw;
}
}
};
@for $i from 10 through 11 {
$sizei : $i * 7.5;
@for $j from 1 through 9 {
$sizej : $j * 7.5;
.myposition#{$i}0#{$j}{
top : #{$sizei}vw;
left : #{$sizej}vw;
}
}
@for $n from 10 through 11 {
$sizen : $n * 7.5;
.myposition#{$i}#{$n}{
top : #{$sizei}vw;
left : #{$sizen}vw;
}
}
}
以上代码，编译之后变成如下代码
.myposition0101, .myposition0102, .myposition0103, .myposition0104, .myposition0105, .myposition0106, .myposition0107, .myposition0108, .myposition0109, .myposition0110, .myposition0111 {
top: 7.5vw;
}
.myposition0201, .myposition0202, .myposition0203, .myposition0204, .myposition0205, .myposition0206, .myposition0207, .myposition0208, .myposition0209, .myposition0210, .myposition0211 {
top: 15vw;
}
.myposition0301, .myposition0302, .myposition0303, .myposition0304, .myposition0305, .myposition0306, .myposition0307, .myposition0308, .myposition0309, .myposition0310, .myposition0311 {
top: 22.5vw;
}
......
.myposition0111, .myposition0211, .myposition0311, .myposition0411, .myposition0511, .myposition0611, .myposition0711, .myposition0811, .myposition0911, .myposition1011, .myposition1111 {
left: 82.5vw;
}
单独拿出其中之一
.myposition0101{
top: xxx;
left:xxx
}
*/
最新文章
- 原创:分享asp.net伪静态成目录形式iis如何设置
- 使用Html来避免写复杂的app代码，跨平台
- OpenGL2-绘制三角形
- Angularjs里面跨作用域
- Linux运维人员共用root帐户权限审计(转至马哥Linux运维）
- Java中如何实现j并发更新数据库同一条数据
- 全面认识openstack：OpenStack架构详解
- WebRtc编译好的vs2015源码
- windows基本命令大全
- leetcode 152. Maximum Product Subarry
- sublime text下安装插件autoprefixer
- python 中的可变对象与不可变对象
- android手势识别ViewFlipper触摸动画
- myeclipse项目导入IDEA
- 软件开发中 SQL SERVER 任务的用法
- Docker(二)-Docker安装
- js解决浮点数的加减乘除
- android处理Back键Home键和Menu键事件(转)
- 史上最简单的SpringCloud教程 | 第十二篇: 断路器监控(Hystrix Dashboard)(Finchley版本)
- Android Exception 12(has leaked ServiceConnection)