SCSS 문법 정리

mixin
소스코드의 중복을 막기 위해 사용

extend, %placeholder
연관성 있는 반복의 경우 사용
특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우

속성 중첩
같은 네임스페이스로 묶인 속성을 중첩하여 작성

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

@content
선언된 mixin에 @content가 포함되어 있다면 해당 부분에 원하는 스타일블록 전달 가능
기존 mixin이 가지고 있는 기능아ㅔ 선택자나 속성을 추가할 수 있음

@mixin 믹스인이름() {
  스타일;
  @content;
}

@include 믹스인이름() {
  // 스타일 블록
  스타일;
}


$color: red;

@mixin colors($color: blue) {
  // Mixin의 범위
  @content;
  background-color: $color;
  border-color: $color;
}

div {
  @include colors() {
    // 스타일 블록이 정의된 범위
    color: $color;
  }
}

@function
연산된 특정 값을 @return 지시어를 통해 반환

@function 함수이름($매개변수) {
  @return 값
}

// Functions
함수이름(인수)

// ex
$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  return $max-width * ($number / $columns) 
}

.box_group {
  width: $max-width;
  
  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}