SCSS

• 📝 새로 알게된 내용만 기록함.

mixin

mixin으로 선언한 후, 사용시에는 @include를 이용함.

@mixin title {
  font-weight: bold;
  font-size: 60px;
  color: mediumaquamarine;
}

.title {
  @include title;
}

ex>

<div class="container">
      <h1 class="title">Hello <span>yjin!</span></h1>
    </div>

    <div class="news">
      <h1 class="news-title">News Headline is <span>HERE</span>!</h1>
    </div>

@mixin title {
  text-align: center;
  position: relative;
  font-size: 60px;
  padding: 10px;

  span {
    color: royalblue;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100px;
    height: 8px;
    background-color: darkgrey;
  }
}

.title {
  @include title;
}

.news-title {
  @include title;
}

믹스인 선언부는 항상 위에 있어야 한다!
-> 먼저 사용하면 오류가 발생한다.

mixin 활용

• 공통적인 디자인을 줄 때 사용.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

// Button Mixin
@mixin default-button {
  padding: 8px 20px;
  width: 120px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
}

.button-group {
  .btn {
    @include default-button;

    &.complete {
      border: 3px solid green;
      color: green;
    }
    &.loading {
      border: 3px solid royalblue;
      color: royalblue;
    }
    &.error {
      border: 3px solid crimson;
      color: crimson;
    }
  }
}

클래스 부여

// Button Mixin
@mixin default-button {
  padding: 8px 20px;
  width: 120px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: 0.2s;

  &.complete:hover {
    background-color: skyblue;
    color: white;
  }
  &.loading:hover {
    background-color: royalblue;
    color: white;
  }
  &.error:hover {
    background-color: crimson;
    color: white;
  }
}

.btn {
  &.complete {
    @include default-button;
    border: 3px solid skyblue;
    color: skyblue;
  }
  &.loading {
    @include default-button;
    border: 3px solid royalblue;
    color: royalblue;
  }
  &.error {
    @include default-button;
    border: 3px solid crimson;
    color: crimson;
  }
}

mixin 매개변수 활용

• mixin 이름 뒤에 ()를 붙여 매개변수를 받음

// Buttons Mixin
@mixin border-style($width, $style, $color) {
  border: $width $style $color;
}

.btn {
  @include border-style(2px, solid, #0066ff);
}

• 매개변수에는 변수와 마찬가지로 $기호를 붙여줘야 한다.

// Buttons Mixin
@mixin border-style($width, $style, $color) {
  border: $width $style $color;
}

@mixin button-padding($updown, $leftright) {
  padding: $updown $leftright;
}

.btn {
  width: 200px;
  outline: none;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  @include button-padding(10px, 40px);

  &.approval {
    @include border-style(2px, solid, skyblue);
  }
  &.reject {
    @include border-style(2px, solid, crimson);
  }
}

extend

• 선택자 속성 가져옴 (확장 느낌)

.btn {
  width: 200px;
  padding: 10px;
  font-size: 18px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  border: 1px solid #000;
}

.another {
// .btn 선택자의 스타일 모두 가져옴
  @extend .btn;
}

placeholder (%)

• 플레이스 홀더 선택자 사용시 헷갈릴 수 있으므로
• @extend와 함께 사용

 <div class="card">
      <div class="card-item">card item #01</div>
      <div class="card-item">card item #02</div>
      <div class="card-item">card item #03</div>
</div>

아래에 .shape라는 플레이스 홀더 선택자를 만들고,
@extend로 그대로 가져다 쓰는 경우,
css로 컴파일 될때 .shape가 그대로 남게 된다.

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.shape {
  width: 250px;
  height: 300px;
  border-radius: 20px;
  box-shadow: 0 0 5px 8px #00000010;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  &-item {
    @extend .shape;
  }
}