css | [scss] margin, padding 도우미
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 11.19 10:31
- 조회
- 3,238
- 댓글
- 0
본문
[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 class="mb-5">
</div>
[/code]
댓글 0개
등록된 댓글이 없습니다.