Sass - 코드 재사용, 조건문&반복문

변수

// 변수 선언
$primary-color: #4286f4;
$secondary-color: #e6e6e6;
$font-size: 14px;

// 변수 사용
body {
  font-size: $font-size;
  background-color: $secondary-color;
  color: $primary-color;
}

h1 {
  color: $secondary-color;
  font-size: ($font-size * 2); // 변수와 수식의 결합
}

p {
  color: darken($primary-color, 20%); // 변수와 내장 함수의 결합
}

변수는 값을 저장하고 재사용하기 위해 사용되며, $ 문자로 시작한다. 변수는 다양한 유형의 값을 저장할 수 있으며, 변수 이름은 대소문자를 구분하지 않는다.

Lists

리스트(Lists)는 쉼표(,)로 구분된 값을 모아둔 데이터 타입. 리스트에는 숫자, 문자열, 색상, 다른 리스트 등 다양한 값을 포함시킬 수 있다.

$my-list: 1, 2, 3, "Hello", #fff;

.my-element {
  color: nth($my-list, 4); // 리스트의 4번째 항목인 "Hello"를 선택
}

Maps

맵(Maps)은 키(key)와 값(value)으로 이루어진 데이터 타입이다.

$my-map: (
  key1: value1,
  key2: value2,
  key3: value3,
);

.my-element {
  color: map-get($my-map, key2); // 맵의 key2에 해당하는 value2를 선택
}

위의 코드에서는 map-get() 함수를 사용하여 맵의 key2에 해당하는 value2를 선택하고 있다.

리스트와 맵을 사용하여 코드를 작성하면, 보다 다양한 값을 그룹화하고 처리할 수 있으므로 코드를 더욱 간결하고 유지보수하기 쉬워진다.

---

Mixin, Extend

Mixin

믹스인(Mixin)은 함수와 비슷한 기능을 제공한다. 스타일 규칙을 그룹화하여 재사용할 수 있는 코드 블록을 생성할 수 있다.

@mixin my-mixin($arg1, $arg2) {
  property1: $arg1;
  property2: $arg2;
}

.my-element {
  @include my-mixin("value1", "value2");
}

스인의 매개변수는 괄호 안에 쉼표로 구분하여 지정할 수 있다. @include 지시어를 사용하여 my-mixin 믹스인을 호출하고 있으며. 믹스인을 호출할 때는 매개변수를 전달하여 값을 설정할 수 있다.

Extend

익스텐드(Extend)는 선택자를 재사용할 수 있도록 해주는 기능이다. 익스텐드를 사용하면 기존의 스타일 규칙을 상속받아 새로운 스타일 규칙을 만들 수 있다.

.my-element {
  @include my-mixin("value1", "value2");
}

.my-element {
  color: red;
}

.my-new-element {
  @extend .my-element;
  font-size: 16px;
}

@extend를 사용하여 .my-new-element가 .my-element의 스타일을 상속하도록 지정하고 있다. 이렇게 하면 .my-new-element는 .my-element의 스타일을 상속받아 color: red 속성도 가지게 된다.

---

조건문, 반복문

조건문

조건문은 @if를 사용하여 정의한다. @if는 조건이 참일 때만 해당 스타일 규칙을 적용한다. Vue.js에서 v-if 가 생각나는 문법인 것 같다.

@mixin my-mixin($color) {
  @if ($color == "red") {
    color: red;
  } @else if ($color == "blue") {
    color: blue;
  } @else {
    color: black;
  }
}

.my-element {
  @include my-mixin("red");
}

위 코드를 css 파일로 컴파일하면

.my-element {
  color: red;
}

반복문

• For 문
  반복문은 @for를 사용하여 정의한다. @for는 특정 횟수만큼 반복되는 스타일 규칙을 생성할 수 있다.

@for $i from 1 through 3 {
  .element-#{$i} {
    width: 100px * $i;
  }
}

.element-1 {
  width: 100px;
}

.element-2 {
  width: 200px;
}

.element-3 {
  width: 300px;
}

@for를 사용하여 1부터 3까지 루프하여 .element-1, .element-2, .element-3 선택자를 생성하고 있다.

• each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

.puma-icon {
  background-image: url('/images/puma.png');
}

.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}

.egret-icon {
  background-image: url('/images/egret.png');
}

.salamander-icon {
  background-image: url('/images/salamander.png');
}

@each를 사용하여 puma, sea-slug, egret, salamander라는 리스트 데이터를 반복하여 처리한다. 반복문 내부에서는 문자열 보간을 사용하여 선택자 이름을 동적으로 생성한다.