[code]
// Spacing
@for $i from 0 to 16 {
.pa-#{$i} {
padding: #{$i * 4}px;
}
.pt-#{$i} {
padding-top: #{$i * 4}px;
}
.pr-#{$i} {
padding-right: #{$i * 4}px;
}
.pb-#{$i} {
padding-bottom: #{$i * 4}px;
}
.pl-#{$i} {
padding-left: #{$i * 4}px;
}
.ma-#{$i} {
margin: #{$i * 4}px;
}
.mt-#{$i} {
margin-top: #{$i * 4}px;
}
.mr-#{$i} {
margin-right: #{$i * 4}px;
}
.mb-#{$i} {
margin-bottom: #{$i * 4}px;
}
.ml-#{$i} {
margin-left: #{$i * 4}px;
}
}
[/code]
– 설명 –
X 의 범위: 1~16
ma-X : margin: Xpx;
mt-X: margin-top: Xpx;
mr-X: margin-right: Xpx;
mb-X: margin-bottom: Xpx;
ml-X: margin-left: Xpx;
pa-X : padding: Xpx;
pt-X: padding-top: Xpx;
pr-X: padding-right: Xpx;
pb-X: padding-bottom: Xpx;
pl-X: padding-left: Xpx;
사용예)
[code]
<div>
</div>
[/code]
