Sass 사용하기 - 중첩규칙 , 네임페이스 속성 중첩

 

 

 

1. 중첩 규칙 (Nesting Rules)

: SASS를 사용하면 선택자를 서로 다른 선언문에서 게속 반복해서 쓰지않고, 선언문 안에 서로 중첩해 쓸 수 있다.

또한 선택자에서 각 엘리먼트를 반복하지 않고 게층 구조를 나타내는 중첩 방식으로 코드를 간다하게 만든다.

 

글만 보면 이게 뭔가 싶다.

바로 예제를 보자.

 

예를 들어서 로고가 있고 옆에 헤더 타이틀이있고 헤더를 기준으로 아래에 줄이있는 그런 화면을 만들어본다고 가정하자.

 이런식으로 (아래에도 내용이나 이미지가 있다고 가정하자. 예제를 위해서 영역을 나타내는 모양만 해놓았다.)

 

 

다음과 같이 쓸 수 있다. 
html에서 썼던 계층구조가 그대로 css에도 옮겨진 느낌이다.

 

 

만약 이것을 일반 css로 썼다면 다음과 같이 쓸 수 있을 것이다.

확실히 불필요하게 계속 줄줄줄 써야하는 엘리먼트들이 없어지니까 sass로 작업한 것이 한결 편하고 구조를 한번에 파악할 수 있는 것 같다. 

 

 

 

2. 네임페이스 속성 중첩 

: sass는 공통된 네임페이스의 속성을 중첩 할 수 있다.

 

사실 나는 네임페이스라는 말을 처음 들어봤다. 그래서 정확한 뜻을 알고싶어서 검색해봤는데 뭔가 내가 찾고있는 네임페이스와 검색에서 나온 네임페이스는 완전 다른느낌,,? 같은 네임페이스이지만 정의가 다른 것을 보고있는 느낌이었다.
그래서 아직 정확한 것을 찾지 못했다. 찾으면 추후에 수정을 해야겠다.

 

내가 생각하는 바로는 css 속성에서 속기로 쓸 수 있는 속성들 말하는 것 같다. 

 

예를 들어 font에는

font-family

font-size

font-style

font-weight 

등이 있을 것이고

 

background 에는 

background-color

background-size

background-image

background-repeat

background-position

등의 속성들이 있을 것이다.

 

 

이 외에도 여러 속성들이 있을 것이다. 

이러한 속성들은 기존 css에 작성을 할 때 

 

이런식으로 앞에 font를 붙여서 반복적으로 썼다면,
sass 에서는 아래와 같이 네임페이스 속성 중첩을 이용하여 불필요한 반복문을 줄일 수 있다.
이런식으로 써서 말이다.

 

 

sass는 단순 중첩만으로도 구조적인 것을 직관적으로 한눈에 알아볼 수 있고,
불필요하게 반복적으로 쓰는 것을 확실히 줄여주는 것을 볼 수 있다.

 

 

 

참고: 책 [웹 디자이너를 위한 sass]