TSL : 2020-04-29

요약

오늘은 scss를 이용해 반응형 웹을 만들기 위해 mixin을 배웠다.

자료를 찾아보면서 나는 그동안 scss를 바보처럼 쓰고 있었다는 것을 깨달았다. scss가 가져다주는 수많은 기능들을 하나도 안 찾아보고 그저 요소 안의 요소 기능만 쓰고 있었으니...

오늘은 mixin을 배웠으니 앞으로 차근차근 다른 document도 정독해야겠다.

---

mixin이란?

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

mixin은 간단히 말하면 함수 같은 것이다. 인자를 받아서(안 받을 수도 있고) 그걸 활용한 결과를 리턴한다. 위에 나와있는 sass documentation의 설명처럼, mixin을 활용하면 소모적, 반복적인 클래스 사용을 줄일 수 있다.

scss에 있는 변수 기능(""$변수명"으로 선언 가능한)과 함께 사용하거나, @each등 반복문과 함께 사용하면 더 좋은 효과를 볼 수 있다.

mixin의 형식

mixin은 다음과 같은 형식을 가진다.

@mixin MixinName ($args...) {
    //write scss using $args
}

@include MixinName($value1, $value2);

선언은 @mixin [mixin 이름] (인자) { 반환될 scss 코드 } 형식으로 하고, 사용할 때는 @include [mixin 이름] (인자가 있다면 인자를 넣어준다)형식으로 불러온다.

mixin 활용 예시

다음에 나오는 예시들은 sass document mixin explanation에 나오는 것들을 가져온 것이다. 간간히 주석 등으로 내가 나중에 기억하기 쉽게 메모해 놓으려고 한다.

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;    //mixin안에서 다른 mixin을 사용하는 것도 가능하다.

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {               // 요소 안에 요소 방법도 사용할 수 있다.
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

@mixin replace-text($image, $x: 50%, $y: 50%) { //default값 설정 가능하다.
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0); //x만 명시했으므로 y는 default값
}

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

@mixin order($height, $selectors...) { //배열 형태로도 받을 수 있다.
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

@use "sass:meta";  //이건 뭐지? 아래 debug를 쓰기 위해 부른건가?

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);  //인자로 받은 것들을 객체 형태로 만들어 주는건가보다.
  // (string: #080, comment: #800, variable: $60b)

  @each $name, $color in meta.keywords($args) { //객체를 반복하면 첫번째가 key, 그다음 value
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);

@mixin hover {
  &:not([disabled]):hover {
      @content;   // include로 부를 때 content 부분에 {}로 넘겨준 부분이 그대로 들어간다.
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;  //요기가 곧 @content
  }
}

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type); //content에 인자도 넘겨줄 수 있나보다.
    }
  }
}

@include media(screen, print) using ($type) { //type이라는 이름으로 인자를 사용하겠다는 뜻인듯.
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

=reset-list  //이건 들여쓰기를 활용한 mixin 표시법. =은 mixin선언을 의미한다.
  margin: 0
  padding: 0
  list-style: none

=horizontal-list
  +reset-list        //+는 include를 의미한다.

  li
    display: inline-block
    margin:
      left: -2px              //들여쓰기로 종속관계를 표현한다.
      right: 2em

nav ul
  +horizontal-list

---

scss로 반응형 웹을 만드는 좋은 예시를 찾았다. 내일은 오늘 배운 걸 적용해서 내 포트폴리오 소개 사이트를 반응형 웹으로 만들어야지.