SCSS 문법 정리

$ - 디자인을 코드로 옮기는 첫 걸음

$변수명: 값;의 형태로 선언한다.

SCSS에서 변수를 선언하려면 $를 사용해 변수명을 짓고, 값을 할당해야 한다.

$variable-1: 1;
$VARIABLE_2: 2;

p {
  line-height: $variable-1;
}

• 변수 이름에는 알파벳, 숫자, -, _를 사용할 수 있으나, 숫자로 시작해선 안된다.

• 소문자로만 작성했을 경우 단어를 이을 때 -를 사용하고, 대문자로만 작성했을 경우 단어를 이을 때 _를 사용하는 컨벤션이 있다.

• 변수에는 CSS의 값으로 쓰일 수 있는 모든 값(헥스코드, 숫자, 문자열, 불리언, color 200ms ease-in...)이 할당될 수 있다.

• 변수의 값을 변화할 수 있으며, 블록 스코프를 따른다.

• $var: 1;
  a {
    line-height: $var;  // line-height: 1
  }
  p {
    $var: 2;
    line-height: $var;  // line-height: 2
  }
  span {
    line-hegiht: $var;  // line-height: 1
  }

• 변수를 선언한 파일을 import할 땐 가장 위에서 불러온다.

• [class^="col-"] = class 속성이 col-로 시작하는 선택자

• @for $i from 1 through 10 {}로 반복문을 작성할 수 있다

   @for $i from 1 through $sm-columns {
     .col-sm-#{$i} {
       width: percentage($i / $sm-columns);
     }
   }

mixin

하나 잘 만들어 놓으면 같은 코드를 절대 안 쓰게 될 것. 재사용의 끝판왕.

@mixin varmix() {} 식으로 선언하며, 인자를 넘겨 줄 수도 있다.

@mixin varmix($color: false) {
color: $color;

  .ic-close {
    width: 40px;
  }
}

p {
  @include varmix();
}

@if() {}로 조건문 사용 가능.
@if(type-of($color) == color)로 유효성 검사 가능.
@content로 내용 들어갈 블록 설정 가능.
or 키워드가 있다.

@mixin responsive($screen) {
  @if ($screen == "T") {
    @media screen and (min-width: $md-breakpoint) {
      @content;
    }
  }
  @if ($screen == "D") {
    @media screen and (min-width: $LG-breakpoint) {
      @content;
    }
  }
}

@if (type-of($color) == color) {
  color: $color;
}

@function

mixin은 코드를 반환하고, function은 값을 반환한다.

map

key-value로 묶인 것

$map = (key1: value1, key2: value2); 식으로 선언하고, map-get(맵이름, 키이름)으로 값을 가져온다

$flex-map: (
  start: flex-start,
  end: flex-end,
  between: space-between,
  around: space-around,
  stretch: stretch,
  center: center,
);

@function _get-flex-value($key) {
  @return map-get($flex-map, $key);
}

placeholder %

공통 스타일을 작성해놓고 상속받는 방식.
mixin과는 달리 인자를 받지 않아 확장성이 떨어진다.

@extend를 통해 적용할 수 있음.