by 이듬(E.UID)

initialize()

초기화 프리셋(Preset) 믹스인

용도

요소 별 초기화 대신, 미리 설정된(pre setting) 초기화가 필요한 경우 사용합니다.

사용법

initialize() 믹스인을 호출합니다. (초기화 클래스 이름을 생성할 경우 true 값을 전달)

initialze($generate-class:bool)

@include initialize(true);

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$generate-class

bool

false

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

body {
  box-sizing: border-box;
}
body::before, body::after {
  box-sizing: inherit;
}
body * {
  box-sizing: inherit;
}
body *::before, body *::after {
  box-sizing: inherit;
}

html {
  font-size: 16px;
}

img {
  border: 0;
  vertical-align: middle;
}

button {
  user-select: none;
  cursor: pointer;
}

abbr[title] {
  cursor: help;
  text-decoration: none;
}

.resetBox {
  margin: 0;
  border: 0;
  padding: 0;
}

.resetLink {
  text-decoration: none;
  color: inherit;
}

.restList {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.resetDl {
  margin-top: 0;
  margin-bottom: 0;
}
.resetDl dd {
  margin-left: 0;
}

.rwdImg {
  max-width: 100%;
  height: auto;
}

.rwdVideo {
  max-width: 100%;
  height: auto;
}

.rwdIframeWrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.rwdIframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.focusVisible:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}
.focusVisible:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.focusVisible:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}

로직

initialze() 믹스인은 다음의 로직에 의해 작성되었습니다. 

@mixin initialize($generate-class: false) {
  @include normalize();
  @include reset-box-sizing();

  @if global-variable-exists('base-rem-size') {
    html {
      font-size: $base-rem-size;
    }
  }

  img {
    @include reset-img;
  }

  button {
    @include reset-button;
  }

  abbr[title] {
    @include reset-abbr;
  }

  @if $generate-class {
    .resetBox {
      @include reset-box;
    }

    .resetLink {
      @include reset-link;
    }

    .restList {
      @include reset-list;
    }

    .resetDl {
      @include reset-dl;
    }

    .rwdImg {
      @include rwd-img;
    }

    .rwdVideo {
      @include rwd-video;
    }

    .rwdIframeWrapper {
      @include rwd-iframe-wrapper;
    }

    .a11yHidden {
      @include a11y-hidden;
    }

    .focusVisible {
      @include focus-visible;
    }
  }
}

  1. 전달 받은 인자가 없을 경우, 클래스 생성 설정 값으로 false 사용

  2. 전역 변수 $base-rem-size 가 존재할 경우, rem 단위 기본 값 설정

  3. img, button, abbr[title] 요소 초기화 설정

  4. 클래스 생성 설정 값이 true인 경우, .resetBox, .resetLink, .resetList, .resetDl 생성

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

Previous이니셜라이즈 (Initialize)Nextnormalize()

Last updated