ChatGPT로 Sass 알아보기

ChatGPT로 Sass 알아보기

이번 포스트에서는 ChatGPT로 스타일 시트 언어인 Sass에 대해서 알아보고자 한다.
Sass는 "Syntactically Awesome Style Sheets"의 약자이며, "구문적으로 뛰어난 스타일 시트"라는 뜻이다.
정말 구문적으로 뛰어난 스타일 시트인지 한번 알아보자.

ChatGPT의 WebPilot 플러그인을 사용하여 Sass를 검색 후에 설명해달라고 요청했으며, 각 기능별 예시를 출력 요청하고 해당 내용을 정리해 보았다.

Question

Sass CSS에 대해서 검색해보고 자세하게 설명해줘

Answer

Sass(스타일시트 언어)는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어입니다. 이 언어는 CSS를 확장하고, CSS를 더욱 효과적이고 효율적으로 작성하도록 도와줍니다.

Sass는 2가지 주요 문법을 가지고 있습니다: 인덴티드 신택스와 SCSS.
인덴티드 신택스는 들여쓰기를 사용하여 코드 블록을 구분하고, SCSS는 CSS와 유사한 블록 형식을 사용합니다.

Sass는 CSS3를 확장하여 객체 지향 언어와 같은 더 전통적인 프로그래밍 언어에서 사용 가능한 매커니즘을 제공합니다.
이러한 매커니즘에는 변수, 네스팅, 믹스인, 셀렉터 상속 등이 포함됩니다.

Sass는 또한 루프를 지원하여 비슷한 클래스나 id를 가진 요소들에 각기 다른 스타일을 적용하는 데 사용할 수 있습니다.
또한, 믹스인은 인수를 지원하여 코드 재사용성을 높입니다.

Sass의 공식 구현체는 루비로 코딩되어 있지만, 다른 구현체들도 존재합니다.
이에는 다트, PHP, 그리고 libSass라는 C의 고성능 구현체가 포함됩니다.

Sass는 다양한 IDE와 통합되어 있어 개발자들이 편리하게 사용할 수 있습니다.
이에는 어도비 드림위버, 이클립스, JetBrains IntelliJ IDEA, 마이크로소프트 비주얼 스튜디오 등이 포함됩니다.

예전에 어떤 외국인의 유투브 영상으로 Sass를 잠깐 공부한 적이 있었는데, 그때 VS Code를 사용해서 했었던 기억이 있다.
기회가 된다면 VS Code로 사용하는 방법도 한번 포스트해봐야겠다.
다음은 Sass의 특징들이다.

변수 (Variables)

Sass는 변수를 사용하여 코드의 재사용성을 높인다.
변수는 $ 기호로 시작하며, 한 번 정의된 변수는 스타일시트 전체에서 사용할 수 있습니다.
이를 통해 색상, 글꼴 스택, 그리드 크기 등을 쉽게 관리할 수 있습니다.

● Sass Variables

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass Variables → CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

네스팅 (Nesting)

CSS는 논리적인 네스팅을 지원하지만 코드 블록 자체는 네스팅되지 않는다.
Sass는 서로 간에 네스팅된 코드를 삽입할 수 있게 해준다.
이를 통해 코드의 가독성을 높이고 중복을 줄일 수 있다.

● Sass Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass Nesting → CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

믹스인 (Mixin)

믹스인은 재사용 가능한 스타일 블록을 만드는 데 사용된다.
@mixin 지시어로 정의하고 @include로 사용합니다.

● Sass Mixin

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass Mixin → CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

상속 (Extend)

@extend 지시어를 사용하여 한 선택자의 모든 스타일을 다른 선택자에 적용할 수 있다.

● Sass Extand

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }

.success {
  @extend %message-shared;
  border-color: green;
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass Extand → CSS

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

루프 (Loop)

@for와 @each 루프는 동적으로 일련의 스타일을 생성하는 데 사용됩니다.

● Sass Loop @for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass @for → CSS

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

● Sass Loop @each

$colors: (red, blue, green);

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass @each CSS

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

.text-green {
  color: green;
}

✅ Sass Loop @for와 @each 차이점

@for와 @each의 차이점은 @for 지시어는 숫자 범위에 대한 반복만 지원하며,
@each는 리스트나 맵에 대한 반복을 수행하는데 사용된다.
아래는 @each를 맵에 대한 반복으로 key:value를 사용했을 때의 코드이다.

● Sass @each key&value

$color-map: (red: #f00, blue: #00f, green: #0f0);

@each $color-name, $color-value in $color-map {
  .text-#{$color-name} {
    color: $color-value;
  }
}

이 Sass 코드는 다음 CSS로 컴파일된다.

● Sass @each key&value → CSS

.text-red {
  color: #f00;
}

.text-blue {
  color: #00f;
}

.text-green {
  color: #0f0;
}

이 예시에서, @each 지시어는 $color-map 맵의 각 항목에 대해 반복하며, 각 반복에서 $color-name 변수에 항목의 키를, $color-value 변수에 항목의 값을 할당한다.
이 변수들은 그 후 .text-#{$color-name} 클래스의 color 속성을 설정하는 데 사용된다.

Python의 dict.items()로 for문 돌릴 때랑 비슷한 느낌이다.

이번 포스트에서는 Sass에 대해서 간단하게 알아보는 시간을 가졌다.
Less가 Sass에 영향을 받아서 개발되었다고 했었는데, 그 때문인지 Sass의 코드 작성법은 대부분 쉽게 보였다.
다만 개인적으론 Less가 더 간단해 보인다.
아무튼 오늘도 하나의 지식을 채울 수 있어서 좋은 시간이었다.