SASS란?

Sass(Syntactically Awesome StyleSheets)는
CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다

사용법

sass 설치

npm i --save sass

sass 파일 css 파일로 컴파일

sass scss파일 경로:css파일이 생성될 경로

ex) sass src/assets/scss:src/assets/css

watch 기능
수정할 때마다 build하는 번거로움을 줄이기 위해 sass에서는 watch기능을 제공한다.
해당 기능은 실행되고 있을 동안 sass파일의 변경을 감시하며 변경시 자동으로 컴파일링 해준다.

ex) sass --watch src/assets/scss:src/assets/css

sass문법

1. 중첩 Nesting

.info{background:#fff}
.info:before{display:block;content:''}
.info .tit{font-size:16px}
.info .lnk{display:block;margin-top:9px}

위 코드를 보면 .info 내 스타일을 적용시킨것을 확인할 수 있다.
.info같이 중복된 코드를 묶을 수 있다.

.info{
      background:#fff;
      &:before{
            display:block;
            content:””;
      };
  .tit{
        font-size:16px;
  }
  .lnk{
        display:block;
        margin-top:9px;
  }
}

2. 불러오기 Import

Sass도 css처럼 import가 가능하다.
차이점은, css의 경우 import된 각각의 .css파일의 로딩을 http에 요청해야한다면, sass는 여러개의 .scss파일을 import해도 최종적으로는 하나의.css로 변환해주기 때문에 http에 요청을 여러번 보낼 필요가 없다.

ex)

.scss---

@import "../../components/cart/cartitems";

  .option-item {
    margin-top: 5em;
    margin-left: 0.5em;
    margin-right: 0.4em;
    border: 0;
  }

  .empty-message {
    margin-top: 10em;
    border: 0;
    text-align: center;
  }

.css---

#CartView .option-item {
  margin-top: 5em;
  margin-left: 0.5em;
  margin-right: 0.4em;
  border: 0;
}
#CartView .empty-message {
  margin-top: 10em;
  border: 0;
  text-align: center;
}