내가 자주쓰는 default scss > IT 기술백서

[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]

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤