Sass
Syntactically awesome stylesheets
Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.
Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.
그중 오늘은 CSS 확장 언어로서의 기본이라고 생각되는 중첩과 선택자에 대해 다루어 보겠습니다.
중첩(Nesting)
Sass는 중첩(Nesting) 기능을 제공하고 있습니다.
상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다.
이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다.
여기에는 선택자를 중첩하는 '규칙 중첩'과 CSS 속성을 중첩하는 '속성 중첩' 두 가지 문법으로 구분할 수 있습니다.
규칙 중첩
CSS 규칙을 중첩하여 작성하는 문법입니다.
규칙 중첩은 부모 선택자를 계속 반복하여 작성하지 않게 해 줍니다.
특히 복잡한 구조 형태의 웹퍼블리싱 작업에서 상위 선택자를 많이 상속해야 할 경우 CSS 규칙을 간단하게 작성할 수 있으며,
그 구조를 한눈에 볼 수 있게 모듈화 할 수 있습니다.
그렇다고 규칙 중첩을 무분별하게 사용하는 것은 권장하지 않습니다.
규칙 중첩에서 상위 선택자를 3 Depth 이상 사용할 경우, 재활용성이 제한적입니다.
이럴 경우에는 별개의 클래스를 만들어 사용하는 것이 좋습니다.
SASS '규칙 중첩' 문법 코드 입니다. |
|
CSS '규칙 중첩' 컴파일 결과 코드 입니다. |
|
속성 중첩
CSS의 공통된 네임스페이스 속성을 중첩하는 문법입니다.
예를 들어 'font-' 시작하는 네임스페이스 속성은 아래와 같습니다.
- ✔ font-family
- ✔ font-size
- ✔ font-style
- ✔ font-weight
위와 같이 CSS 속성 앞에 접두사로 'font-'를 반복해서 썼다면, 속성 중첩 문법을 이용하여 반복하여 작성하지 않아도 됩니다.
SASS '속성 중첩' 문법 코드 입니다. |
|
CSS '속성 중첩' 컴파일 결과 코드 입니다. |
|
특수 선택자
Sass는 CSS 문법과 동일한 선택자 외에 특수 선택자 2가지 기능을 제공합니다.
중첩 안에서 상위 엘리먼트를 참조하는 '부모 참조 선택자'와 @extend로 호출하는 '플레이스홀더 선택자'입니다.
부모 참조 선택자
중첩 안에서 '&(Ampersand)'를 사용하여 부모 엘리먼트를 참조할 수 있는 문법입니다.
가상 클래스, 가상 요소, 속성 선택자, id 또는 class 셀렉터를 사용할 때 편리하며, 두 가지 사용방법이 있습니다.
- ✔ 부모 참조 선택자를 부모 엘리먼트와 결합하여 사용하는 방법입니다.
- ✔ 부모 참조 선택자를 하위 자식 선택자로 이동하여 사용하는 방법입니다.
SASS 부모 참조 선택자를 부모 엘리먼트와 결합한 문법 코드 입니다. |
|
CSS 부모 참조 선택자를 부모 엘리먼트와 결합한 컴파일 결과 코드 입니다. |
|
SASS 부모 참조 선택자를 하위 자식 선택자로 이용한 문법 코드 입니다. |
|
CSS 부모 참조 선택자를 하위 자식 선택자로 이용한 컴파일 결과 코드 입니다. |
|
플레이스홀더 선택자
@extend로 호출하며 '%(Percent)'를 사용하여, 함수나 변수를 사용하듯이 내가 원하는 요소에 불러와 사용할 수 있습니다.
SASS '플레이스홀더' 문법 코드 입니다. |
|
CSS '플레이스홀더' 컴파일 결과 코드 입니다. |
|
마치며...
이번 포스팅은 Sass 문법에서 중첩(Nesting), 특수 선택자에 대하여 알아보았습니다.
다음에는 Sass 문법 중 믹스인, 불러오기 등에 대해서 포스팅할 생각입니다.
맑은 커뮤니케이션 퍼블리셔들을 위한 공간이지만, 동종업에서 일하시는 모든 웹퍼블리셔 분들에게 조금이나마 도움이 되었으면 합니다.
감사합니다.
'Utility Knowhow' 카테고리의 다른 글
[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default (0) | 2021.11.01 |
---|---|
[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자 (0) | 2021.10.28 |
[SassㆍSCSS] 장ㆍ단점 소개, 설치방법 및 컴파일 명령어 (0) | 2021.10.25 |
Visual Studio Code(VS Code) 설치방법 및 내가 쓰는 확장 플러그인 (0) | 2021.10.20 |
Visual Studio Code(VS Code) 유용한 단축키 사용 방법 (0) | 2021.06.21 |