SASS 문법

SASS의 문법?

SASS는 CSS와 다르게 같은 부모를 가진 다른 태그를 선택할때
부모를 반복해서 선택하지 않게 해주는 장점이 있다.

header{
    background-color : #fff;
    color : #111;
    .gnb{
      width: 100px;
      height: 100px;
    }
    .box{
        width: 200px;
        height: 150px;
        background-color: aqua;
    }
  }

해당 코드를 css로 바꾸게 된다면

header {
  background-color: #fff;
  color: #111;
}
header .gnb {
  width: 100px;
  height: 100px;
}
header .box {
  width: 200px;
  height: 150px;
  background-color: aqua;
}

위와 같이 .gnb와.box는 같은 부모태그인 header를 가지고 있다. 일반적인 css라면 저렇게 부모를 일일이 지정해줘야 겠지만 SCSS는 그 부모 태그안에 자식 태그들을 넣음으로써
header안에 있는 .gnb와.box를 선택하게 된다.

가상 선택자를 선택할때

CSS는 가상 선택자를 선택할때 일일이 앞에 태그를 달았지만
SCSS는 다르다.

header{
    background-color : #fff;
    color : #111;
    div{
      width: 100px;
      height: 100px;
      &:nth-child(2){
        background-color: aqua;
      }
    }
  }

위에 코드를 CSS로 변환하면

header {
  background-color: #fff;
  color: #111;
}
header div {
  width: 100px;
  height: 100px;
}
header div:nth-child(2) {
  background-color: aqua;
}

이렇게 개발자가 중복적으로 태그를 일일이 적지 않고 css속성을 줄수있다.

변수

SCSS는 변수를 만들어 저장할수있다.
이 장점은 개발자가 "떠한 컨텐츠의 색깔을 바꿔주세요" 라고 요청이 왔을때 간편하게 해당 변수만 수정하면 되게 만들어주는 기능이다.

$color : #00498c;
header{
    background-color : #fff;
    color : #111;
    div{
      width: 100px;
      height: 100px;
      background-color: $color;
    }
  }

위에 코드를 봤을때 $color 변수에 #00498c를 담고 사용하는 모습이 보인다.