최신기능을 지원하는 CSS 전처리기 Dart SCSS

 

Dart SCSS 와 Node SCSS의 차이

 

Dart Sass와 Node Sass는 모두 SCSS (Sassy CSS)를 컴파일하는 도구입니다. 두 도구는 기본적으로 같은 역할을 수행하지만, 내부적으로 사용하는 기술과 지원하는 기능에는 몇 가지 차이점이 있습니다:

1. 구현 언어: Dart Sass는 Dart 언어로 작성되었고, Node Sass는 LibSass라는 C/C++ 라이브러리를 바탕으로 Node.js에서 동작하도록 작성되었습니다.
2. 기능 지원: Dart Sass는 Sass의 최신 기능들을 가장 빨리 지원합니다. 이는 Dart Sass가 Sass의 공식 참조 구현이기 때문입니다. 반면, Node Sass는 LibSass를 기반으로 하며, 이는 Sass의 모든 기능을 항상 최신 상태로 유지하지는 않습니다. 따라서, Dart Sass는 보통 Node Sass보다 새로운 기능을 더 빨리 지원하게 됩니다.
3. 성능: Node Sass가 일반적으로 Dart Sass보다 컴파일 속도가 빠릅니다. 이는 Node Sass가 C/C++로 작성된 LibSass를 사용하고 있기 때문입니다. 그러나 대부분의 사용 경우에서는 이 속도 차이가 크게 눈에 띄지 않습니다.
4. 호환성 및 유지 관리: 2021년 기준으로 Node Sass는 더 이상 새로운 기능 개발이 진행되지 않습니다. 또한, LibSass 역시 더 이상 새로운 Sass 기능을 지원하지 않습니다. 따라서, 최신 Sass 기능을 사용하려면 Dart Sass를 사용하는 것이 좋습니다.

Dart Sass가 공식적으로 지원되고 있는 도구이므로, 새로운 프로젝트를 시작하거나 최신 Sass 기능을 사용하려는 경우 Dart Sass를 사용하는 것이 좋습니다.

 

Dart SCSS 의 함수 모음

 

Dart Sass의 맵 함수

• map-get($map, $key): 주어진 $map에서 $key에 해당하는 값을 반환합니다.
• map-merge($map1, $map2): $map1과 $map2를 병합한 새로운 맵을 반환합니다.
• map-remove($map, $keys...): $map에서 주어진 키(들)을 제거한 새로운 맵을 반환합니다.

 

Dart Sass의 리스트 함수

• length($list): 주어진 $list의 길이를 반환합니다.
• nth($list, $n): $list에서 $n번째 아이템을 반환합니다.
• set-nth($list, $n, $value): $list의 $n번째 아이템을 $value로 설정한 새로운 리스트를 반환합니다.
• join($list1, $list2, [$separator]): $list1과 $list2를 병합한 새로운 리스트를 반환합니다. 선택적으로 $separator를 지정하여 아이템 사이에 구분자를 추가할 수 있습니다.
• append($list1, $val, [$separator]): $list1에 $val을 추가한 새로운 리스트를 반환합니다. 선택적으로 $separator를 지정하여 아이템 사이에 구분자를 추가할 수 있습니다.
• index($list, $value): 주어진 $list에서 $value의 위치를 반환합니다. $value가 리스트에 없는 경우 null을 반환합니다.
• zip($lists...): 주어진 리스트(들)를 병합한 새로운 리스트를 반환합니다. 병합된 리스트는 가장 짧은 리스트의 길이에 맞춰지며, 남은 아이템은 버려집니다.
• slice($list, $start-at, [$end-at]): 주어진 리스트에서 지정된 시작 위치부터 끝 위치까지의 부분 리스트를 반환합니다. 선택적으로 $end-at을 지정하여 리스트의 끝 위치를 설정할 수 있습니다.

 

Dart Sass의 색상 함수

밝기와 채도 조절 함수

• adjust-hue($color, $degrees): 주어진 $color의 색상을 $degrees만큼 회전한 색상을 반환합니다.
• lighten($color, $amount): 주어진 $color를 $amount만큼 밝게 한 색상을 반환합니다.
• darken($color, $amount): 주어진 $color를 $amount만큼 어둡게 한 색상을 반환합니다.
• saturate($color, $amount): 주어진 $color의 채도를 $amount만큼 높인 색상을 반환합니다.
• desaturate($color, $amount): 주어진 $color의 채도를 $amount만큼 낮춘 색상을 반환합니다.
• grayscale($color): 주어진 $color를 회색으로 만든 색상을 반환합니다.
• invert($color): 주어진 $color를 역전시킨 색상을 반환합니다.
• opacify($color, $amount): 주어진 $color를 $amount만큼 불투명하게 한 색상을 반환합니다.
• transparentize($color, $amount): 주어진 $color를 $amount만큼 투명하게 한 색상을 반환합니다.

 

색상 조합 함수

• mix($color1, $color2, [$weight]): 두 개의 색상을 혼합한 새로운 색상을 반환합니다. 선택적으로 $weight를 지정하여 두 색상의 비율을 조절할 수 있습니다.
• adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]): 주어진 $color의 RGB, HSL 또는 알파값을 조절한 새로운 색상을 반환합니다. 선택적으로 RGB, HSL 또는 알파값을 지정하여 해당 값을 조절할 수 있습니다.

 

색상 추출 함수

• red($color): 주어진 $color의 빨간색(Red)값을 반환합니다.
• green($color): 주어진 $color의 녹색(Green)값을 반환합니다.
• blue($color): 주어진 $color의 파란색(Blue)값을 반환합니다.
• hue($color): 주어진 $color의 색상(Hue)값을 반환합니다.
• saturation($color): 주어진 $color의 채도(Saturation)값을 반환합니다.
• lightness($color): 주어진 $color의 밝기(Lightness)값을 반환합니다.

 

Dart Sass의 문자열 함수

 

문자열 조작 함수

• str-length($string): 주어진 문자열의 길이를 반환합니다.
• str-insert($string, $insert, $index): 주어진 위치에 새로운 문자열을 삽입한 새로운 문자열을 반환합니다.
• str-index($string, $substring): 주어진 문자열에서 주어진 부분 문자열의 위치를 반환합니다.
• str-slice($string, $start-at, $end-at): 주어진 문자열에서 지정된 시작 위치부터 끝 위치까지의 부분 문자열을 반환합니다.
• to-upper-case($string): 주어진 문자열의 모든 문자를 대문자로 변환한 새로운 문자열을 반환합니다.
• to-lower-case($string): 주어진 문자열의 모든 문자를 소문자로 변환한 새로운 문자열을 반환합니다.

 

문자열 검색 함수

• str-contains($string, $substring): 주어진 문자열이 주어진 부분 문자열을 포함하는지 여부를 반환합니다.
• str-starts-with($string, $substring): 주어진 문자열이 주어진 부분 문자열로 시작하는지 여부를 반환합니다.
• str-ends-with($string, $substring): 주어진 문자열이 주어진 부분 문자열로 끝나는지 여부를 반환합니다.

 

Dart Sass의 수학 함수

 

기본 수학 함수

• abs($number): 주어진 숫자의 절대값을 반환합니다.
• min($numbers...): 주어진 숫자 중 가장 작은 값을 반환합니다.
• max($numbers...): 주어진 숫자 중 가장 큰 값을 반환합니다.
• round($number): 주어진 숫자를 반올림한 값을 반환합니다.
• ceil($number): 주어진 숫자를 올림한 값을 반환합니다.
• floor($number): 주어진 숫자를 내림한 값을 반환합니다.

 

산술 함수

• percentage($number): 주어진 숫자를 백분율로 변환한 값을 반환합니다.
• mod($number, $base): 주어진 숫자를 주어진 기준으로 나눈 나머지를 반환합니다.
• sqrt($number): 주어진 숫자의 제곱근을 반환합니다.
• pow($base, $exponent): 주어진 기반 수를 주어진 지수만큼 거듭제곱한 값을 반환합니다.

 

색상 함수

• lightness($color): 주어진 색상의 밝기를 반환합니다.
• darkness($color): 주어진 색상의 어둡기를 반환합니다.

 

 

@use

 

Dart SCSS에서 @use 규칙은 스타일시트를 불러오고 사용할 수 있게 해줍니다. 이 규칙은 @import의 대체재로, 이름 공간이 있는 스타일시트, 기본값 오버라이드, 컴포넌트 지향 스타일 등과 같은 특징을 제공합니다.

 

다음은 Dart SCSS에서 @use를 어떻게 사용하는지에 대한 기본 예시입니다:

// _buttons.scss라는 외부 스타일시트를 불러옴
@use 'buttons';

// 'buttons' 스타일시트의 변수, 믹스인, 함수 등을 사용할 수 있음
.button {
  background-color: buttons.$primary-color;
  @include buttons.rounded-corners;
}

 

이 예에서, _buttons.scss 파일의 $primary-color 변수와 rounded-corners 믹스인을 사용하고 있습니다. 또한, @use를 사용할 때는 .를 이용하여 사용할 수 있습니다.

이런 방법은 여러 개의 SCSS 파일을 모듈화하여 사용하기 때문에, 코드의 재사용성과 유지보수성을 향상시킬 수 있습니다.

먼저, SCSS에서 @use는 모듈을 로드하고 사용하는 데 필요한 규칙입니다. @use가 SCSS 모듈을 불러오면, 그 모듈의 모든 변수, 함수, 믹스인 등이 로컬 이름 공간에 묶이게 됩니다. 그래서 충돌 없이 여러 모듈의 변수나 함수 등을 사용할 수 있습니다.

@use를 이용해 모듈을 불러오면, 그 모듈의 변수, 함수, 믹스인 등을 모듈의 이름을 이용해 접근할 수 있습니다.

 

예를 들어:

@use 'buttons';

.button {
  background-color: buttons.$primary-color;
  border-radius: buttons.border-radius(5px);
}

여기서 'buttons'는 불러온 모듈의 이름이며, $primary-color는 그 모듈의 변수이고, border-radius는 그 모듈의 함수입니다.

마지막으로, @use는 모듈의 기본값을 오버라이드하는 데 사용할 수도 있습니다.

 

 

예를 들면:

@use 'buttons' with (
  $primary-color: blue,
  $secondary-color: red,
  $border-radius: 10px
);

.button {
  background-color: buttons.$primary-color; // 이제 'blue'로 설정됨
  border-color: buttons.$secondary-color; // 이제 'red'로 설정됨
  border-radius: buttons.$border-radius; // 이제 '10px'로 설정됨
}

 

여기서 with 키워드를 이용해 'buttons' 모듈의 $primary-color 변수를 'blue'로 오버라이드했습니다.

이렇게 @use를 사용하면 SCSS 코드를 보다 효과적으로 조직화하고 모듈화할 수 있습니다. 이는 코드의 가독성과 유지보수성을 향상시키며, 재사용성을 높여 줍니다.

 

as 키워드를 사용하여 모듈에 대한 별칭을 지정할 수 있습니다. 이는 특히 모듈의 이름이 길거나 복잡한 경우, 또는 두 모듈의 이름이 충돌하는 경우 유용합니다.

// 'buttons' 모듈을 'b'라는 별칭으로 불러옴
@use 'buttons' as b;

.button {
  background-color: b.$primary-color;
  @include b.rounded-corners;
}

위의 예시에서, _buttons.scss 파일은 'b'라는 별칭으로 불러와졌으며, 이 별칭을 사용하여 해당 파일의 변수와 믹스인에 접근했습니다.

또한, 특정 모듈의 모든 멤버를 현재 이름 공간에 포함시키려면 *를 사용할 수 있습니다.

 

예를 들면:

@use 'buttons' as *;

.button {
  background-color: $primary-color;  // 'buttons'의 $primary-color
  @include rounded-corners;  // 'buttons'의 rounded-corners 믹스인
}

 

위의 예시에서, as *를 사용함으로써 buttons 모듈의 모든 멤버를 현재 이름 공간에 포함시켰습니다. 그 결과, 별도의 접두사 없이 그 모듈의 모든 변수, 믹스인 등에 직접 접근할 수 있게 되었습니다.

단, as *를 너무 자주 사용하면 이름 충돌이 발생할 수 있으므로 주의해야 합니다. as *는 최대한 특정 목적으로 제한적으로 사용해야 합니다.

 

모듈에 대한 별칭을 지정하면서 동시에 일부 변수를 오버라이드하는 것이 가능합니다. 아래는 이러한 사용 방법을 보여주는 예시입니다:

@use 'buttons' as b with (
  $primary-color: blue
);

.button {
  background-color: b.$primary-color;  // 이제 'blue'로 설정됨
  @include b.rounded-corners;
}

위의 예시에서는 buttons 모듈을 b라는 별칭으로 불러오면서 동시에 $primary-color 변수를 blue로 오버라이드했습니다.

 

또한, @use를 사용할 때 SCSS 파일의 위치를 정확히 지정하기 위해 상대 경로 또는 절대 경로를 사용할 수 있습니다. 예를 들어, 같은 디렉토리에 있는 SCSS 파일을 불러오려면 파일 이름 앞에 ./를 붙이면 됩니다: