SASS

SASS(Syntactically Awesome Style Sheets)는 CSS pre-processor (전처리기) 로서, CSS를 프로그래밍 언어스럽게 작성할 수 있다. SASS는 변수, 함수, 반복문, 연산자 등을 사용할 수 있으며 SASS 문법으로 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다.

Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원하며 보통 scss 문법이 더 많이 사용된다.

 

 

인스톨 방법

npm install node-sass

 

---

 

 

문법

 

1. 변수 사용

 

scss파일에선 변수를 사용할 수 있다. 

$main : #ff0000;

.red {
  color : $main;
}

 

css에서 비슷한 기능인 :root 가 있는데, 이는 IE에서 호환되지 않는다.

그러나 scss를 사용하면 root 와 비슷한 효과를 낼 수 있다.

 

호환되지 않는 :root

 

 

2. nesting 

div.container {
  h4 {
    color : blue;
  }
  p {
    color : green;
  }
}

셀렉터를 옆으로 나열하지 않고 안에 작성. 띄어쓰기 셀렉터랑 같은 의미.

 

굳이 이렇게 쓰는 이유는

 

1. 셀렉터 해석이 쉽고

2. 관련된 class끼리 뭉텅이로 관리하기 편하다.

 

 

3. extends 

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert2 {
  @extend .my-alert;
  background : yellow;
}

비슷하지만, 색만 조금 다른 속성을 주고 싶을 때 extends 를 적용할 수 있다.

 

 

4. @mixin / @include

mixin은 함수를 만드는 문법이다.

function 키워드 대신 @mixin 을 쓰며 중괄호 안에 축약하고 싶은 코드들을 쓰면 된다.

그리고 함수를 부를 땐 @include 함수명() 을 쓴다.

 

@mixin maker() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include maker()
}

 

 

 

더 많은 SASS 문법

heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!