今天看别人源码,定义了部分基础css,突然加到20px就没有了,由于使用过tailwind的便捷后。发现这样定义方法会很蠢。
/** 基础通用 **/
.pt5 {
padding-top: 5px;
}
.pr5 {
padding-right: 5px;
}
.pb5 {
padding-bottom: 5px;
}
.mt5 {
margin-top: 5px;
}
…………// 省略部分
目标页面渲染效果
又无意发现定义的css里面有用到for循环,突发奇想就按想法试了试,效果是成功,解决了传统css定义方法。
项目代码如下,我尝试使用scss编译工具编译了一下.。
这是编译后的效果 两个效果编译行数达到2400+ 。就去官网查for循环的判断语法。于是想到设置步长编译。不得将for循环改成while循环。试了一下@if 效果,发现不能使用%去取余,也没继续查下去了。
这是本效果的源码 和 解析 后的代码。
- 使用for 的代码行数是2450
- 使用while的代码行数是515
官方解释 through 与 to 的含义区别:
@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from through ,或者 @for
v
a
r
f
r
o
m
<
s
t
a
r
t
>
t
o
<
e
n
d
>
,
区
别
在
于
t
h
r
o
u
g
h
与
t
o
的
含
义
:
当
使
用
t
h
r
o
u
g
h
时
,
条
件
范
围
包
含
<
s
t
a
r
t
>
与
<
e
n
d
>
的
值
,
而
使
用
t
o
时
条
件
范
围
只
包
含
<
s
t
a
r
t
>
的
值
不
包
含
<
e
n
d
>
的
值
。
另
外
,
var from <start> to <end>,区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 <start> 与 <end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外,
varfrom<start>to<end>,区别在于through与to的含义:当使用through时,条件范围包含<start>与<end>的值,而使用to时条件范围只包含<start>的值不包含<end>的值。另外,var 可以是任何变量,比如 $i; 和 必须是整数值。