2. Sass - 스타일 규칙

lize·2022년 11월 14일

Sass 공식 문서

목록 보기

2/6

개요

스타일 규칙은 CSS와 마찬가지로 Sass의 기초입니다. 그리고 동일한 방법으로 동작합니다: 선택자로 스타일을 지정할 요소를 선택하고 해당 요소의 모양에 영향을 미치는 속성을 선언합니다.

Nesting(중첩)

하지만 Sass는 당신의 삶을 더 편하게 만들고 싶어합니다. 동일한 선택자를 반복하지 않고 하나의 스타일 규칙을 다른 스타일 안에 작성할 수 있습니다. Sass는 외부 규칙의 선택자와 내부 규칙의 선택자를 자동으로 결합합니다.

⚠주의!
중첩된 규칙은 매우 유용하지만 실제로 생성하는 CSS의 양을 시각화하는 것을 어렵게 만들 수도 있습니다. 깊이 중첩할수록 CSS를 서비스하는 데 더 많은 대역폭이 필요하고 브라우저가 그것을 렌더링하는 데 더 많은 작업이 필요합니다. 선택자를 얕게 유지하세요!

선택자 목록

중첩된 규칙은 선택자 목록(쉼표로 구분된 선택자들)을 처리하는 데 유용합니다. 각 복합 선택자(쉼표 사이의 선택자)는 별도로 중첩된 다음, 선택자 목록으로 다시 결합됩니다.

선택자 결합자

결합자를 사용하는 선택자도 중첩할 수 있습니다. 결합자를 외부 선택자의 끝에 두거나 내부 선택자의 시작에 두거나 둘 사이에 모두 단독으로 둘 수 있습니다.

고급 중첩

중첩된 스타일 규칙을 단순히 후손 결합자(즉, 일반 공간)와 결합하는 것 이상의 작업을 하려면 Sass가 뒤를 따릅니다. 자세한 내용은 부모 선택자 설명서를 참조하세요.

Interpolation(보간)

보간을 사용하여 변수 및 함수 호출과 같은 표현식의 값을 선택자에 주입할 수 있습니다. 사용자가 전달하는 매개 변수로부터 선택자를 만들 수 있으므로 믹스인을 작성할 때 특히 유용합니다.

💡 재미있는 사실
Sass는 보간이 해결된 후에만 선택자를 구문 분석합니다. 즉, 분석되지 않을 것이라는 걱정 없이 보간법을 사용하여 선택기의 모든 부분을 안전하게 생성할 수 있습니다.

보간을 상위 선택자 &, @at-root 규칙 및 선택자 함수과 결합하여 선택자를 동적으로 생성할 때 심각한 힘을 행사할 수 있습니다. 자세한 내용은 상위 선택자 설명서를 참조하세요.

속성 선언

CSS에서처럼 Sass에서 속성 선언은 선택자와 일치하는 요소들이 어떻게 스타일링되는지를 정의한다. 그러나 Sass는 쓰기 및 자동화를 쉽게 하기 위해 추가 기능을 제공합니다. 무엇보다도 선언의 값은 모든 SassScript 표현식이 될 수 있으며, 이는 평가되고 결과에 포함될 것입니다.

Interpolation(보간)

속성 이름에는 보간을 포함할 수 있으므로 필요에 따라 동적으로 속성을 생성할 수 있습니다. 전체 속성 이름을 보간할 수도 있습니다!

Nesting(중첩)

많은 CSS 속성은 네임스페이스의 한 종류로 작용하는 동일한 접두사로 시작합니다. 예를 들어, font-family, font-size 및 font-weight는 모두 font-로 시작합니다. Sass는 속성 선언이 중첩되도록 허용함으로써 이 작업을 더 쉽고 덜 중복되게 만듭니다. 외부 속성 이름은 하이픈(-)으로 구분하여 내부에 추가됩니다.

이러한 CSS 속성 중 일부는 네임스페이스를 속성 이름으로 사용하는 짧은 버전을 가지고 있다. 이러한 경우에는 축약 값과 보다 명시적인 중첩 버전을 모두 작성할 수 있습니다.

Hidden Declarations(숨겨진 선언)

때때로 속성 선언이 일정 시간 동안만 표시되기를 원할 때가 있습니다. 선언의 값이 null이거나 빈 따옴표로 묶이지 않은 문자열일 경우 Sass는 해당 선언을 CSS로 컴파일하지 않습니다.

Custom Properties(사용자 정의 속성)

CSS 변수라고도 하는 CSS 사용자 정의 속성에는 특이한 선언 문법이 있습니다. 선언 값에 거의 모든 텍스트를 허용합니다. 또한 이러한 값은 JavaScript에서 액세스할 수 있으므로 모든 값이 잠재적으로 사용자와 관련이 있을 수 있습니다. 여기에는 일반적으로 SassScript로 구문 분석되는 값이 포함됩니다.

이 때문에 Sass는 사용자 정의 속성 선언을 다른 속성 선언과 다르게 구문 분석합니다. SassScript처럼 보이는 토큰을 포함한 모든 토큰은 CSS에 있는 그대로 전달됩니다. 유일한 예외는 동적 값을 사용자 정의 속성에 삽입하는 유일한 방법인 보간입니다.

⚠주의!
불행히도 보간은 문자열에서 따옴표를 제거하므로, Sass 변수에서 가져온 사용자 정의 속성의 값으로 따옴표 붙은 문자열을 사용하기 어렵습니다. 이 문제를 해결하려면 meta.inspect() 함수를 사용하여 따옴표를 유지할 수 있습니다.

부모 선택자

부모 선택자 &는 Sass에서 발명한 특수 선택자로서 중첩된 선택자에서 외부 선택자를 참조하는 데 사용됩니다. 가상 클래스를 추가하거나 부모 앞에 선택자를 추가하는 것과 같은 더 복잡한 방식으로 외부 선택자를 재사용할 수 있습니다.

부모 선택자가 내부 선택자에서 사용되면 해당하는 외부 선택자로 대체됩니다. 이것은 정상적인 중첩 동작 대신 발생합니다.

⚠주의!
부모 선택자는 h1과 같은 type 선택자로 대체될 수 있기 때문에 유형 선택자도 허용되는 복합 선택자의 시작 부분에서만 허용됩니다. 예를 들어, span&는 허용되지 않습니다.

하지만 이 제한을 완화하는 방법을 찾고 있습니다. 그렇게 하는 데 도움을 주고 싶다면 이 GitHub 이슈를 확인하세요.

접미사 추가

부모 선택자를 사용하여 외부 선택자에 접미사를 추가할 수도 있습니다. 이것은 고도로 구조화된 클래스 이름을 사용하는 BEM과 같은 방법론을 사용할 때 특히 유용합니다. 외부 선택기가 영숫자 이름(클래스, ID 및 요소 선택자와 같은)으로 끝나는 한 상위 선택자를 사용하여 추가 텍스트를 추가할 수 있습니다.

SassScript에서는

상위 선택자는 SassScript 내에서도 사용할 수 있습니다. 이것은 선택자 함수에서 사용하는 것과 동일한 형식으로 현재 부모 선택자를 반환하는 특수 표현식입니다: 따옴표로 묶이지 않은 문자열(복합 선택자)을 포함하는 공백으로 구분된 목록(복합 선택기)을 포함하는 쉼표로 구분된 목록(선택자 목록)입니다.

& 표현식이 스타일 규칙 외부에서 사용되면 null을 반환합니다. null은 falsey이므로 스타일 규칙에서 mixin이 호출되는지 여부를 쉽게 확인할 수 있습니다.

고급 중첩

&를 일반 SassScript 표현식으로 사용할 수 있습니다. 즉, 다른 선택자에서도 이를 함수에 전달하거나 보간에 포함할 수 있습니다! 선택자 함수 및 @at-root 규칙과 함께 사용하면 매우 강력한 방법으로 선택자를 중첩할 수 있습니다.

예를 들어 외부 선택자와 요소 선택자에 일치하는 선택자를 작성한다고 가정합니다. selector.unify() 함수를 사용하여 &를 사용자의 선택자와 결합하는 이와 같은 믹스인을 작성할 수 있습니다.

⚠️주의!
Sass가 선택자를 중첩할 때 선택자를 생성하는 데 어떤 보간법이 사용되었는지 알 수 없습니다. 즉, &를 SassScript 표현식으로 사용한 경우에도 외부 선택자를 내부 선택자에 자동으로 추가합니다. 그렇기 때문에 Sass가 외부 선택자를 포함하지 않도록 명시적으로 @at-root 규칙을 사용해야 합니다.

placeholder 선택자 (%)

Sass에는 "placeholder"라고 하는 특별한 종류의 선택자가 있습니다. 그것은 클래스 선택자와 매우 유사하게 보이고 작동하지만 %로 시작하고 CSS 결과물에 포함되지 않습니다. 사실, placeholder 선택자를 포함하는 복잡한 선택자(쉼표 사이의 항목)는 CSS에 포함되지 않으며 선택자가 모두 placeholder 선택자를 포함하는 스타일 규칙도 포함되지 않습니다.