#16.TIL | React(SASS)

SASS는 기존 CSS를 조금 더 프로그래밍스럽게 다룰 수 있는 대체 문법이다. 이걸 활용하면 변수, 함수, 반복문등을 활용하여 CSS를 사용할 수 있다.

1. 변수

$mainColor : #ff0000;

.red {
  color : $mainColor;
}

$변수명 : 집어넣을값 을 사용하여 자주 쓰는 CSS속성을 변수에 담아서 사용할 수 있다.

2. Nesting

CSS에서 속성을 주다보면 점점 셀렉터가 길어져서 보기 힘들때가 많다. 실제로 위스타그램 프로젝트때
위에 사진처럼 길게 작성했었는데 SASS를 이용하면

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

이런식으로 부모 class 안에다 CSS속성을 줌으로써 셀렉터 해석도 쉽고, 나중에 유지보수할때도 쉽게 알아 볼 수 있다는 장점이 있다.

3. Extends

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  min-width: 690px;
  border-bottom: 1px solid rgb(218, 217, 217);
  background-color: white;
}

이런 CSS속성을 가진 navbar가 있다고 하고, background-color만 다른 navbar2가 필요하다고 하면, 코드를 똑같이 복사 붙여넣기 하지 않고, 아래와 같이 포현하여 CSS재활용성을 높일 수 있다.

.navbar2 {
  @extend .navbar
  background-color: white;
}

@mixin / @include

@mixin 함수() {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  min-width: 690px;
  border-bottom: 1px solid rgb(218, 217, 217);
  background-color: white;
  
  navbar {
  	@include 함수()
  }

또한, @mixin으로 함수를 만들어 축약하고 싶은 코드를 담을 수 있고, @includes 함수명()으로 불러와 사용할 수 있다. CSS는 위에서 밑으로 Cascading이 되기 때문에 JavaScript와는 다르게 함수명이 위에 선언되어야 밑에서 사용이 가능하다.