[ SASS/SCSS 입문 ] Sass에서 변수 사용으로 효율성과 유지보수성을 극대화

 

 

Sass(시트 언어의 한 종류로 CSS의 확장 기능을 제공)는 웹 개발자들 사이에서 

그 효율성과 유용성으로 인해 널리 사용되고 있습니다. 

특히, Sass에서 제공하는 변수(variables) 기능은 스타일 시트의 관리를 

훨씬 더 유연하고 효율적으로 만들어 주는 강력한 도구입니다. 

 

이번 블로그 글에서는 Sass의 변수 사용법과 그로 인해 얻을 수 있는 이점들을 자세히 탐구해 보겠습니다.

 

 

 

 

변수의 개념 및 SCSS에서 변수를 사용하는 이유

---

 

CSS를 사용하면서 반복되는 색상 코드, 폰트 크기, 마진 값 등을 

일일이 기억하고 관리하는 것은 번거롭고 오류를 발생시킬 여지가 많습니다. 

이런 문제를 해결하기 위해 Sass(SCSS)에서는 변수라는 개념을 도입했습니다. 

 

변수를 사용하면, 반복되는 값을 한 곳에 저장해두고 필요할 때마다 재사용할 수 있습니다. 

이는 코드의 재사용성과 가독성을 향상시키고, 유지보수를 용이하게 만들어 줍니다.

 

 

 

 

변수 선언 방법

---

 

변수 선언은 $ 기호를 사용하여 이루어집니다. 

선언한 변수는 스타일 시트 내 어디서든 사용할 수 있습니다. 

 

예를 들어, 주요 색상을 변수로 저장해두고 이를 여러 곳에서 활용할 수 있습니다.

 

 

SCSS : 

$primary-color: #e86b88;
$body-font-size: 16px;

body {
  color: $primary-color;
  font-size: $body-font-size;
}

 

위 예제에서 $primary-color와 $body-font-size는 

각각 색상과 폰트 크기를 저장하는 변수입니다. 

이 변수들을 사용하여 body 태그의 색상과 폰트 크기를 지정했습니다.

 

 

 

 

다양한 데이터 유형(색상, 문자열, 숫자, 리스트, 맵 등)

---

 

Sass에서는 다양한 유형의 데이터를 변수로 저장할 수 있습니다. 

이는 색상, 문자열, 숫자, 리스트, 맵 등이 포함됩니다. 

각각의 데이터 유형은 특정 스타일링 요구 사항을 해결하는 데 유용하게 사용됩니다.

 

SCSS :

$font-stack: Helvetica, sans-serif;
$primary-colors: (blue: #3498db, red: #e74c3c);

 

위 코드에서 $font-stack은 문자열 리스트를, $primary-colors는 색상의 맵을 저장하고 있습니다.

이러한 다양한 데이터 유형을 활용하면, 스타일 시트를 더욱 유연하고 효율적으로 관리할 수 있습니다.

 

 

 

전역 변수와 지역 변수의 차이점

---

 

Sass에서 변수는 선언된 위치에 따라 전역 변수와 지역 변수로 구분됩니다. 

전역 변수는 스타일 시트의 어느 곳에서나 접근할 수 있는 반면, 

지역 변수는 선언된 블록 내에서만 접근할 수 있습니다.

 

SCSS : 

$global-color: #333; // 전역 변수

.container {
  $local-color: #777; // 지역 변수
  color: $local-color;
}

// .container 외부에서 $local-color에 접근할 수 없음

 

이 구분은 변수의 적용 범위를 제한하고, 스타일 시트의 복잡성을 관리하는 데 도움을 줍니다.

 

 

 

실제 프로젝트에서 변수를 효율적으로 관리하는 방법

---

 

프로젝트의 규모가 커짐에 따라, 변수를 체계적으로 관리하는 것이 중요해집니다. 

다음은 실제 프로젝트에서 변수를 효율적으로 관리하는 몇 가지 방법입니다.

 

 

명명 규칙 정하기

변수의 용도를 명확하게 반영할 수 있는 명명 규칙을 정하는 것이 중요합니다.

예를 들어, 색상 관련 변수는 color-로 시작하게 하고, 폰트 사이즈는 font-size-로 시작하도록 할 수 있습니다.

 

모듈화

스타일 시트를 모듈화하여 각 파일에

특정 부분(예: 색상, 타이포그래피, 레이아웃 등)의 변수들을 분리해 저장합니다.

이렇게 하면 관련 변수들을 쉽게 찾을 수 있고, 유지보수도 용이해집니다.

 

전역 변수의 신중한 사용

전역 변수는 편리하지만, 남용하면 코드의 복잡성을 증가시킬 수 있습니다.

전역으로 관리해야 할 핵심 변수들만 전역 변수로 선언하고,

나머지는 가능한 한 지역 변수로 관리하는 것이 좋습니다.

 

변수의 범위와 접근성 고려하기

변수를 사용할 때는 그 범위를 명확히 해야 합니다.

가능한 한 지역 변수를 사용하여, 필요한 곳에서만 변수에 접근할 수 있도록 하는 것이 좋습니다.

이는 변수의 잘못된 사용을 방지하고, 코드의 가독성을 향상시킵니다.

 

값의 재사용과 유지보수성을 고려한 설계

변수를 사용하는 주요 목적 중 하나는 값의 재사용과 유지보수의 용이성입니다.

따라서, 프로젝트 초기 단계에서부터 변수를 활용한 설계를 고려해야 합니다.

예를 들어, 디자인 시스템을 구축할 때, 색상 팔레트, 폰트 사이즈, 간격 등의

기본적인 스타일 값을 변수로 정의하고, 이를 전체 프로젝트에서 일관되게 사용합니다.

 

문서화

큰 프로젝트에서는 변수의 사용법과 목적을 문서화하는 것이 중요합니다.

이는 팀 내의 새로운 구성원이나 프로젝트에 참여하는 다른 개발자들이

스타일 가이드를 빠르게 이해하고 적용할 수 있도록 돕습니다.

 

 

 

이러한 전략을 통해 Sass 변수를 효율적으로 관리하면, 

프로젝트의 스타일링이 보다 일관되고 유지보수하기 쉬워집니다. 

변수를 적절히 활용함으로써, 디자인 변경이나 새로운 기능 추가 시 

스타일 시트를 빠르고 쉽게 업데이트할 수 있으며, 

이는 개발 프로세스의 효율성을 크게 향상시킵니다.