변수는 의심할 여지 없이 SCSS에서 내가 가장 좋아하는 기능입니다. 변수가 일반 CSS에 비해 제공되는 유일한 개선 사항이더라도 SCSS를 사용할 것이라고 확신합니다. CSS의 어색하고 울퉁불퉁한 것보다 훨씬 낫습니다custom props.

이것이 사람들이 SCSS 변수를 최대한 활용하지 않는 것을 보는 것이 저를 너무 슬프게 하는 이유입니다. 만약 당신이 그 사람들 중 하나라면, 당신이 그것을 바꿀 수 있는 몇 가지 방법이 있습니다 ;)

참고: 이 게시물의 모든 예제는 SCSS로 작성되었습니다. 왜냐하면 이것이 제가 선호하는 구문이기 때문입니다. 그러나 제가 아는 한 동일한 일반 규칙이 Sass에도 적용됩니다.

팁 1: 범위 사용

보통 SCSS 변수를 사용하는 사람을 보면 거의 독점적으로 전역 변수를 사용합니다. 문서 상단의 글꼴 스택, 글꼴 크기, 색상 설정 - 일반적인 일입니다.

그러나 SCSS 변수가 scope 을 지원한다는 것을 항상 기억하는 것이 좋습니다. 즉, 블록에서 선언된 변수는 해당 블록 내에서만 액세스할 수 있습니다. 이렇게:

.some-element {
  $some-spacing: 1em;
  // The variable can be used locally.
  padding-left: $some-spacing;
}

.another-element {
  // This will fail - the variable is not accessible here.
  padding-left: $some-spacing;
}

이것은 우리가 필요할 때마다 변수를 사용할 수 있다는 것을 의미하며, 모듈 상단에 전역 변수를 선언하여 엉망으로 만들 필요가 없습니다.

또한 $primary 와 같은 전역 변수를 선언한 다음 일부 고유 섹션에 대해 변경하기로 결정하면 나머지 요소에 대한 전역 변수를 덮어쓰지 않고 로컬에서 수행할 수 있습니다.

$primary: #03a;

.some-element {
  // This will override the variable's value in this block.
  $primary: #f06;
  color: $primary;
}

.another-element {
  // But here the original value will be applied.
  color: $primary;
}

좋은 오래된 범위 지정은 우리가 실수로 전역 스타일을 망칠 것이라는 걱정 없이 새로운 변수를 선언할 수 있는 자유를 줍니다.

팁 2: 매직 넘버를 피하세요

내가 변수에 대해 좋아하는 한 가지는 내 코드에서 매직 넘버 사용을 피할 수 있는 쉬운 방법을 제공한다는 것입니다. 예를 들어, 다음을 수행하는 대신 항상 직사각형이 되는 요소가 있는 경우:

.rectangular-element {
  width: 10em;
  height: 10em;
}

나는 이것을 할 수 있다:

.rectangular-element {
  $size: 10em;
  width: $size;
  height: $size;
}

다음에 이 요소의 크기를 변경해야 할 때 두 개의 속성 대신 하나의 변수를 업데이트할 수 있습니다. 이것이 사소한 변경이라고 생각할 수도 있지만 요소에 많은 속성이 있는 경우 나중에 블록 상단에서 업데이트할 가능성이 있는 하나의 변수를 갖는 것이 실제로 매우 유용합니다.

.some-element {
  // See how this is a bit easier to find?
  $size: 10em;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1em;
  width: $size;
  height: $size;
  display: flex;
  justify-content: center;
  align-items: center;
}

중첩을 사용하는 경우 더욱 유용합니다. 그러면 몇 개의 블록이 상위 블록의 맨 위에 선언된 변수를 사용할 수 있습니다. 매우 편리합니다!

매직 넘버를 피하기 위해 변수를 활용하는 또 다른 방법은 디자인에서 패턴을 찾는 것입니다. 예를 들어 디자이너가 페이지 전체의 모든 간격을 공들여 통합한 레이아웃이 있을 수 있습니다. 다음을 수행하여 이 모든 좋은 작업을 버리는 것은 낭비입니다.

.some-element {
  margin: 3em 1em;
}

.another-element {
  margin: 3em 1em;
}

대신 다음을 수행할 수 있습니다.

.some-element {
  margin: $spacing-large $spacing-small;
}

.another-element {
  margin: $spacing-large $spacing-small;
}

이런 식으로 반복을 피하는 동시에 디자이너의 의도에 대한 이해를 보여줍니다. 그리고 디자이너의 클라이언트가 "모든 간격은 2픽셀 더 커야 한다"고 결정하면 과거의 나에게 감사할 수 있습니다.

팁 3: 계속 찾아보세요

SCSS 변수 작업에 대한 나의 최고 팁은 항상 SCSS 변수 작업에 대한 더 나은 방법을 찾는 것입니다. 저는 OOP에서 프로그래밍을 배우기 시작했기 때문에 SCSS 변수에 대해 C#이나 JS 변수에 대해 생각하는 것처럼 약간 생각하는 경향이 있습니다.

다른 언어로 작업하고 그곳에서 변수와 연결된 실습을 배울 때 배운 내용을 SCSS 변수에도 적용할 수 있는지 잠시 생각해 보는 것은 어떻습니까? 그 가변적인 근육을 구부려, 그것이 축 늘어지지 않도록! 💪

SCSS 변수 사용에 대한 멋진 팁이 있으면 쿠키 이모티콘으로 후하게 지불하겠습니다.