如何减少此 css 代码
How to reduce this css code
我正在为我的项目使用此 css 代码,现在我计划将所有这些移动到 sass 文件 我不知道如何减少此代码 我是 sass :( 有什么方法可以减少以下 css 代码。
.push-bottom-0 {
padding-bottom: 0px;
}
.push-bottom-3 {
padding-bottom: 3px;
}
.push-bottom-5 {
padding-bottom: 5px;
}
.push-bottom-10 {
padding-bottom: 10px;
}
.push-bottom-13 {
padding-bottom: 10px;
}
.push-bottom-20 {
padding-bottom: 20px;
}
.push-bottom-30 {
padding-bottom: 30px;
}
.push-bottom-40 {
padding-bottom: 40px;
}
.push-bottom-50 {
padding-bottom: 50px;
}
.push-bottom-60 {
padding-bottom: 60px;
}
.push-bottom-70 {
padding-bottom: 70px;
}
.push-bottom-80 {
padding-bottom: 80px;
}
.push-bottom-90 {
padding-bottom: 90px;
}
.push-bottom-100 {
padding-bottom: 100px;
}
您可以尝试 sass 循环
@list 0 3 5 10 13 20 30 40 50 60 70 80 90 100
@each $number in $list
.push-bottom-#{$number} {
padding-bottom: $number;
}
您可以使用 each 循环。
@each $i in 0 3 5 10 13 20 30 40 50 60 70 80 90 100
.push-bottom-#{$i}
padding-bottom: #{$i}px
@each $i in 0, 3, 5, 10, 13, 20, 30, 40, 50, 60, 70, 80, 90, 100 {
.push-bottom-#{$i} {
padding-bottom: #{$i}px;
}
}
我正在为我的项目使用此 css 代码,现在我计划将所有这些移动到 sass 文件 我不知道如何减少此代码 我是 sass :( 有什么方法可以减少以下 css 代码。
.push-bottom-0 {
padding-bottom: 0px;
}
.push-bottom-3 {
padding-bottom: 3px;
}
.push-bottom-5 {
padding-bottom: 5px;
}
.push-bottom-10 {
padding-bottom: 10px;
}
.push-bottom-13 {
padding-bottom: 10px;
}
.push-bottom-20 {
padding-bottom: 20px;
}
.push-bottom-30 {
padding-bottom: 30px;
}
.push-bottom-40 {
padding-bottom: 40px;
}
.push-bottom-50 {
padding-bottom: 50px;
}
.push-bottom-60 {
padding-bottom: 60px;
}
.push-bottom-70 {
padding-bottom: 70px;
}
.push-bottom-80 {
padding-bottom: 80px;
}
.push-bottom-90 {
padding-bottom: 90px;
}
.push-bottom-100 {
padding-bottom: 100px;
}
您可以尝试 sass 循环
@list 0 3 5 10 13 20 30 40 50 60 70 80 90 100
@each $number in $list
.push-bottom-#{$number} {
padding-bottom: $number;
}
您可以使用 each 循环。
@each $i in 0 3 5 10 13 20 30 40 50 60 70 80 90 100
.push-bottom-#{$i}
padding-bottom: #{$i}px
@each $i in 0, 3, 5, 10, 13, 20, 30, 40, 50, 60, 70, 80, 90, 100 {
.push-bottom-#{$i} {
padding-bottom: #{$i}px;
}
}