[Chapter 04] Sass

Sass

CSS 에서와 같은 결합 선택자 사용하기

div {
  color:black;

  // 선택 연산자
  .foo {
    color: black; // 자손(descendant) 선택자
  }
  > .foo {
    color: black; // 자식(child) combinator
  }
  + .foo {
    color: #000; // 인접형제(adjacent sibling) 선택자
  }
  ~ .foo {
    color: yellow; // 일반형제(general sibling) 선택자
  }
  & .foo {
    color: #fff; // Sass 부모(Parent) 참조 선택자
  }
  .foo & {
    color: red; // Sass 부모(Parent) 참조 선택자
  }
  &.bar {
    color: green;
  }
}

RWD, 부모 참조 선택자와 미디어쿼리

선언 구간 내부의 미디어쿼리는 외부로 분리됩니다.

Nesting 중첩규칙을 사용하면 구조를 쉽게 파악하면서 반복적인 선택자 코드 사용량을 대폭 줄일 수 있어서 매우 유용합니다.

nav {
    width: 50%;
    position: relative;
    padding: {
        top: 20px;
        left: 10px;
    }
    @media only screen and (max-width:480px) {
        width: 100%;
    }
    a {
      color: #000;
      &[target=_blank]:before {
          content: "";
          position: absolute;
          @media only screen and (max-width: 480px) {
              position: relative;
          }
        }
    }
}

See the Pen sass 미디어쿼리 by jaeheekim (@jaehee) on CodePen.

선택자 상속(Selector Inheritance), 옵션(!optional) 플래그 설정

@extend 를 사용해 선언된 다른 규칙의 내용을 상속할 수 있습니다.

다시 말해서, 재사용 가능한 클래스 선택자를 상속할 수 있는 것이고 CSS 코드 컴파일 시 그룹핑으로 처리되는 것을 알 수 있습니다.

//   재사용 가능한 .btn-link 라고 한다면
.btn-link {
  background-color: #fff;
  font-weight: bold;
  padding: 10px;
  color: #000;
}

.btn-link-01 {
  @extend .btn-link-01 !optional; 
  // .btn-link-01 클래스를 상속함을 명시 하였으나 .btn-link-01 선택자가 없어도 에러가 발생하지 않는다.
  background-color: red;
  .decs & {
    background-color: darken(red, 20%);
  }
}

//   !optional 은 @extend 상속 시,
//   선언된 선택자가 존재하지 않을 경우
//   '옵션' 처리하여 오류를 발생시키지 않도록 할 수 있습니다.

See the Pen sass !optional by jaeheekim (@jaehee) on CodePen.

호출 (Import on Steroids) 및 호출 제어(Partials)

CSS 뿐만 아니라 *.scss, *.sass 파일을 @import 문을 사용하여 호출 할 수 있으며  *.scss, *.sass 파일 중에 CSS 파일로 컴파일되지 않게 하는 방법은 파일명 앞에 언더바(_)를 붙여주면 됩니다.

// scss, sass 확장자의 경우는 생략 가능합니다.

// 단, css 파일인 경우 css 확장자는 필해 명시
@import "common.scss";
@import "style";

// 여러 개의 파일을 불러들일 때는 콤마(,)로 구분하여 불러들일 수 있습니다.
// 콤마를 사용하여 구분자를 추가하면 컴파일시 자동으로 @import 구문을 생성해줍니다

/*
   주석이 @import 문보다 먼저 위치한 경우에도
   CSS 해석시에는 주석이 아래 존재하게 됩니다.
*/
@import "common",'style';
// 기본적으로 scss sass 파일은 해석되면서 css 파일로 컴파일됩니다.
// 하지만 scss, sass 파일 앞에 밑줄(_)이 붙어 있으면 이를 CSS 파일로 변경하여 내보내지 않습니다.
// 이는 스타일 모듈별 관리에 용이합니다.
_common.scss

스타일 모듈 관리 방법

Sass 에서는 각각의 역할을 분리하여 필요에 따라 재사용할 수 있도록 모듈을 관리하는 것이 가능합니다.