반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 CSS 확장 언어로서의 기본이라고 생각되는 중첩선택자에 대해 다루어 보겠습니다.

 

 

 

 

 

중첩(Nesting)

 

Sass는 중첩(Nesting) 기능을 제공하고 있습니다.

상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다.

이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. 

여기에는 선택자를 중첩하는 '규칙 중첩'과 CSS 속성을 중첩하는 '속성 중첩' 두 가지 문법으로 구분할 수 있습니다.

 

 

규칙 중첩

CSS 규칙을 중첩하여 작성하는 문법입니다.

규칙 중첩은 부모 선택자를 계속 반복하여 작성하지 않게 해 줍니다.

특히 복잡한 구조 형태의 웹퍼블리싱 작업에서 상위 선택자를 많이 상속해야 할 경우 CSS 규칙을 간단하게 작성할 수 있으며,

그 구조를 한눈에 볼 수 있게 모듈화 할 수 있습니다.

그렇다고 규칙 중첩을 무분별하게 사용하는 것은 권장하지 않습니다.

규칙 중첩에서 상위 선택자를 3 Depth 이상 사용할 경우, 재활용성이 제한적입니다.

이럴 경우에는 별개의 클래스를 만들어 사용하는 것이 좋습니다.  

 

SASS '규칙 중첩' 문법 코드 입니다.
#gnb {
    background-color: #fff;
    width: 200px;
    ul {
        display: flex;
        color: #111;
    }
}

 

CSS '규칙 중첩' 컴파일 결과 코드 입니다.
#gnb {
  background-color: #fff;
  width: 200px;
}
#gnb ul {
  display: flex;
  color: #111;
}

 

 

속성 중첩

CSS의 공통된 네임스페이스 속성을 중첩하는 문법입니다.

예를 들어 'font-' 시작하는 네임스페이스 속성은 아래와 같습니다.

  • font-family
  • font-size
  •  font-style
  •  font-weight

위와 같이 CSS 속성 앞에 접두사로 'font-' 반복해서 썼다면, 속성 중첩 문법을 이용하여 반복하여 작성하지 않아도 됩니다.

 

SASS '속성 중첩' 문법 코드 입니다.
h1 {
    font: {
        family: 'Malgun Gothic';
        size: 25px;
        style: normal;
        weight: bold;
    }
    line-height: 1;
}

 

CSS '속성 중첩' 컴파일 결과 코드 입니다.
h1 {
  font-family: 'Malgun Gothic';
  font-size: 25px;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
}

 

 

 

 

 

특수 선택자

 

Sass는 CSS 문법과 동일한 선택자 외에 특수 선택자 2가지 기능을 제공합니다. 

중첩 안에서 상위 엘리먼트를 참조하는 '부모 참조 선택자'와 @extend로 호출하는 '플레이스홀더 선택자'입니다.

 

 

부모 참조 선택자

중첩 안에서 '&(Ampersand)'를 사용하여 부모 엘리먼트를 참조할 수 있는 문법입니다.

가상 클래스, 가상 요소, 속성 선택자, id 또는 class 셀렉터를 사용할 때 편리하며, 두 가지 사용방법이 있습니다.

  • 부모 참조 선택자를 부모 엘리먼트와 결합하여 사용하는 방법입니다.
  • 부모 참조 선택자를 하위 자식 선택자로 이동하여 사용하는 방법입니다.

 

 

SASS 부모 참조 선택자를 부모 엘리먼트와 결합한 문법 코드 입니다.
.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
    }
}

div {
    &[class^='section_'] {
        background-color: #ccc;
    }
}

 

CSS 부모 참조 선택자를 부모 엘리먼트와 결합한 컴파일 결과 코드 입니다.
.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

.list_gnb li:first-child {
  margin-left: 0;
}

div[class^='section_'] {
  background-color: #ccc;
}

 

SASS 부모 참조 선택자를 하위 자식 선택자로 이용한 문법 코드 입니다.
.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
        div.section & {
            margin-left: 20px;
        }
    }
}

 

CSS 부모 참조 선택자를 하위 자식 선택자로 이용한 컴파일 결과 코드 입니다.
.list_gnb li:first-child {
  margin-left: 0;
}
div.section .list_gnb li {
  margin-left: 20px;
}

 

 

플레이스홀더 선택자

@extend로 호출하며 '%(Percent)'를 사용하여, 함수나 변수를 사용하듯이 내가 원하는 요소에 불러와 사용할 수 있습니다.

 

 

SASS '플레이스홀더' 문법 코드 입니다.
#gnb {
    background-color: #fff;
    width: 200px;
    ul%box-type {
        display: flex;
        color: #111;
    }
}

.list_notice {
    @extend %box-type;
}

h1, %title-type {
    color: #000;
}

h2 {
    @extend %title-type; 
}

 

CSS '플레이스홀더' 컴파일 결과 코드 입니다.
#gnb {
  background-color: #fff;
  width: 200px;
}
#gnb ul.list_notice {
  display: flex;
  color: #111;
}

h1, h2 {
  color: #000;
}

 

 

 

 

 

마치며...

 

이번 포스팅은 Sass 문법에서 중첩(Nesting), 특수 선택자에 대하여 알아보았습니다.

다음에는 Sass 문법 중 믹스인, 불러오기 등에 대해서 포스팅할 생각입니다.

맑은 커뮤니케이션 퍼블리셔들을 위한 공간이지만, 동종업에서 일하시는 모든 웹퍼블리셔 분들에게 조금이나마 도움이 되었으면 합니다.

감사합니다.

 

 

반응형

+ Recent posts