[오늘부터 참여] 피바나치 수열에 설정된 마진 패딩.
이전에는 px로 지정한 고정된 폭의 공백을 완벽하게 재현했지만 지금은 ss를 사용하고 변수를 사용하며 제작 방법이 점점 달라지고 있다.
.m{방향]-{크기}: 여백의 덧셈
.p{방향]-{크기}: 페이지 여백을 채우는 설치 방법
이전 일반 클래스의 쓰기 (공백)
.m-10 {
margin: 1rem !important; }
.mt-10 {
margin-top: 1rem !important; }
.mr-10 {
margin-right: 1rem !important; }
.mb-10 {
margin-bottom: 1rem !important; }
.ml-10 {
margin-left: 1rem !important; }
.mx-10 {
margin-left: 1rem !important;
margin-right: 1rem !important; }
.my-10 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
그러나coliss는 다음 기사를 보고 생각을 바꿨다.그리고 사스로 쓰세요!잠깐만요.
CSS에서 스펀지와 대응하는 공간을 효율적으로 정의하는 방법, 예를 들어margin,padding 등
WEB의 공백은 30px 미만으로 상세하게 설정하는 것이 좋지만, 30px가 넘는 공백은 5px에 새기지 않는 것이 좋다.
이에 따라 최근 Sass(scss)의 공백은 다음과 같이 설정됐다.
Sass 설정
최근 일반 클래스에 대한 쓰기 (공백)
$space-unit : 1rem !default; //16px
$margins : (
"xxs": (0.25 * $space-unit), // 4px
"xs": (0.5 * $space-unit), // 8px
"sm": (0.75 * $space-unit), // 12px
"md": (1.25 * $space-unit), // 20px
"lg": (2 * $space-unit), // 32px
"xl": (3.25 * $space-unit), // 52px
"xxl": (5.25 * $space-unit), // 84px
"0": ($space-unit * 0)
);
@each $size,$pixel in $margins {
.m-#{$size} {
margin:#{$pixel} !important;
}
.mt-#{$size} {
margin-top:#{$pixel} !important;
}
.mr-#{$size} {
margin-right:#{$pixel} !important;
}
.mb-#{$size} {
margin-bottom:#{$pixel} !important;
}
.ml-#{$size} {
margin-left:#{$pixel} !important;
}
.mx-#{$size} {
margin-left:#{$pixel} !important;
margin-right:#{$pixel} !important;
}
.my-#{$size} {
margin-top:#{$pixel} !important;
margin-bottom:#{$pixel} !important;
}
.p-#{$size} {
padding:#{$pixel} !important;
}
.pt-#{$size} {
padding-top:#{$pixel} !important;
}
.pr-#{$size} {
padding-right:#{$pixel} !important;
}
.pb-#{$size} {
padding-bottom:#{$pixel} !important;
}
.pl-#{$size} {
padding-left:#{$pixel} !important;
}
.px-#{$size} {
padding-left:#{$pixel} !important;
padding-right:#{$pixel} !important;
}
.py-#{$size} {
padding-top:#{$pixel} !important;
padding-bottom:#{$pixel} !important;
}
}
총결산margin·padding의 공백을 변수화·규칙화하세요!
그때의 규칙으로 피보나치 수열을 추천합니다.
Reference
이 문제에 관하여([오늘부터 참여] 피바나치 수열에 설정된 마진 패딩.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/abeno/items/9418badf6bcaa651e94a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)