场景:在写页面时,有很多重复的css样式,想要写一个公共的样式文件来实现,比如margin-top:10px
使用less:
// margin-left:20px
<div class="m-l-20"></div>
@list: {
//我用的是vue框架,这里的label直接写数字代码可能会标红,但是可以正常使用,
//如果介意的朋友可以替换为:xs:6px; s:10px; m:15px这样子
6: 6px;
10: 10px;
15: 15px;
20: 20px;
25: 25px;
30: 30px;
35: 35px;
40: 40px;
50: 50px;
}
//外边距or内边距
@type: {
m: margin;
p: padding
};
//方向
@direction:{
t: top;
r: right;
b: bottom;
l: left;
}
// eg: m-t-10 = margin-top:10px
each(@type, .(@typeVal, @typeKey, @typeIdx) {
each(@direction, .(@dirVal, @dirKey, @dirIdx) {
each(@list, {
.@{typeKey}-@{dirKey}-@{key} {
@{typeVal}-@{dirVal}: @value * 1px!important;
}
})
})
})
使用scss (感觉这个比less更方便)
// margin-left:20px;font-size:24px
<div class="m-l-20 f-s-24"></div>
//内外边距
@for $i from 1 through 300 {
.m-t-#{$i} {
margin-top: #{$i}px !important;
}
.m-r-#{$i} {
margin-right: #{$i}px !important;
}
.m-b-#{$i} {
margin-bottom: #{$i}px !important;
}
.m-l-#{$i} {
margin-left: #{$i}px !important;
}
.p-t-#{$i} {
padding-top: #{$i}px !important;
}
.p-r-#{$i} {
padding-right: #{$i}px !important;
}
.p-b-#{$i} {
padding-bottom: #{$i}px !important;
}
.p-l-#{$i} {
padding-left: #{$i}px !important;
}
}
//字体大小全局样式
@for $i from 10 through 32 {
.f-s-#{$i} {
font-size: #{$i}px !important;
}
}