css | 내가 자주쓰는 default scss
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 11.29 13:14
- 조회
- 3,240
- 댓글
- 0
본문
[code]
html {
font-size: 16px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
scroll-snap-type: y proximity;
scroll-behavior: smooth;
word-break: keep-all;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
line-height: 1.7;
}
$sizes: ("sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px");
*:focus {
outline: none;
}
a,
a:visited,
a:hover {
text-decoration: none;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.container {
padding-left: 12px;
padding-right: 12px;
margin: 0 auto;
width: 100%;
max-width: 1224px;
}
@media (min-width: 992px) {
.container {
padding-left: 112px;
padding-right: 112px;
max-width: 1324px;
}
}
ul,
ol {
list-style: none;
padding-left: 0;
}
img {
vertical-align: middle;
max-width: 100%;
}
.dark {
color: #fff;
}
@media (max-width: 992px) {
html {
font-size: 12px;
}
}
.ma-auto {
margin: 0 auto;
}
// Spacing
@for $i from 0 to 16 {
.pa-#{$i} {
padding: #{$i * 4}px;
}
.py-#{$i} {
padding-top: #{$i * 4}px;
padding-bottom: #{$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;
}
.mx-#{$i} {
margin-left: #{$i * 4}px;
margin-right: #{$i * 4}px;
}
.my-#{$i} {
margin-top: #{$i * 4}px;
margin-bottom: #{$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;
}
@each $key, $size in $sizes {
.ma-#{key}-auto {
margin: 0 auto;
}
@media (min-width: $size) {
.pa-#{$key}-#{$i} {
padding: #{$i * 4}px !important;
}
.py-#{$key}-#{$i} {
padding-top: #{$i * 4}px !important;
padding-bottom: #{$i * 4}px !important;
}
.pt-#{$key}-#{$i} {
padding-top: #{$i * 4}px !important;
}
.pr-#{$key}-#{$i} {
padding-right: #{$i * 4}px !important;
}
.pb-#{$key}-#{$i} {
padding-bottom: #{$i * 4}px !important;
}
.pl-#{$key}-#{$i} {
padding-left: #{$i * 4}px !important;
}
.ma-#{$key}-#{$i} {
margin: #{$i * 4}px !important;
}
.mx-#{$key}-#{$i} {
margin-left: #{$i * 4}px !important;
margin-right: #{$i * 4}px !important;
}
.my-#{$key}-#{$i} {
margin-top: #{$i * 4}px !important;
margin-bottom: #{$i * 4}px !important;
}
.mt-#{$key}-#{$i} {
margin-top: #{$i * 4}px !important;
}
.mr-#{$key}-#{$i} {
margin-right: #{$i * 4}px !important;
}
.mb-#{$key}-#{$i} {
margin-bottom: #{$i * 4}px !important;
}
.ml-#{$key}-#{$i} {
margin-left: #{$i * 4}px !important;
}
}
}
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
@each $key, $size in $sizes {
@media (min-width: $size) {
.text-#{$key}-left {
text-align: left;
}
.text-#{$key}-center {
text-align: center;
}
.text-#{$key}-right {
text-align: right;
}
}
}
.row {
display: flex;
justify-content: flex-start;
.col {
flex-grow: 1;
}
.col-1 {
flex-basis: 8.33333333%;
}
.col-2 {
flex-basis: 16.66666666%;
}
.col-3 {
flex-basis: 25%;
}
.col-4 {
flex-basis: 33.33333333%
}
.col-5 {
flex-basis: 41.66666666%;
}
.col-6 {
flex-basis: 50%;
}
.col-7 {
flex-basis: 58.33333333%;
}
.col-8 {
flex-basis: 66.66666666%;
}
.col-9 {
flex-basis: 75%;
}
.col-10 {
flex-basis: 83.33333333%;
}
.col-11 {
flex-basis: 91.66666666%;
}
.col-12 {
flex-basis: 100%;
}
@each $key, $size in $sizes {
@media (min-width: $size) {
.col-#{$key}-1 {
flex-basis: 8.33333333%;
}
.col-#{$key}-2 {
flex-basis: 16.66666666%;
}
.col-#{$key}-3 {
flex-basis: 25%;
}
.col-#{$key}-4 {
flex-basis: 33.33333333%
}
.col-#{$key}-5 {
flex-basis: 41.66666666%;
}
.col-#{$key}-6 {
flex-basis: 50%;
}
.col-#{$key}-7 {
flex-basis: 58.33333333%;
}
.col-#{$key}-8 {
flex-basis: 66.66666666%;
}
.col-#{$key}-9 {
flex-basis: 75%;
}
.col-#{$key}-10 {
flex-basis: 83.33333333%;
}
.col-#{$key}-11 {
flex-basis: 91.66666666%;
}
.col-#{$key}-12 {
flex-basis: 100%;
}
}
}
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.align-items-end {
align-items: flex-end;
}
.font-size-1 {
font-size: 0.75rem !important;
}
.font-size-2 {
font-size: 0.8rem !important;
}
.font-size-3 {
font-size: 0.9rem !important;
}
.font-size-4 {
font-size: 1rem !important;
}
.font-size-5 {
font-size: 1.25rem !important;
}
.font-size-6 {
font-size: 1.5rem !important;
}
.font-size-7 {
font-size: 1.75rem !important;
}
.font-size-8 {
font-size: 2rem !important;
}
.font-size-9 {
font-size: 3rem !important;
}
.font-size-10 {
font-size: 5rem !important;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
.d-flex {
display: flex;
}
.d-table {
display: table;
}
@each $key, $size in $sizes {
@media (min-width: $size) {
.d-#{$key}-none {
display: none;
}
.d-#{$key}-inline {
display: inline;
}
.d-#{$key}-block {
display: block;
}
.d-#{$key}-inline-block {
display: inline-block
}
.d-#{$key}-flex {
display: flex;
}
.d-#{$key}-flex-block {
display: inline-block;
}
.d-#{$key}-table {
display: table;
}
.d-#{$key}-inline-table {
display: inline-table;
}
}
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-center {
justify-content: center;
}
.justify-content-around {
justify-content: space-around;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-1 {
flex-shrink: 1;
}
.circle-arrow {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
padding-top: 5px;
&.circle-arrow-red {
background-color: #f00;
}
}
.accent {
display: inline-flex;
flex-direction: column;
justify-content: flex-end;
vertical-align: bottom;
padding-top: 5px;
border-top: 3px solid #000;
&.accent-bold {
border-width: 5px;
}
}
[/code]
댓글 0개
등록된 댓글이 없습니다.