[CSS] sass를 사용하는 이유! 네스팅 문법

처음 개발을 시작할 때 꾸역꾸역 박스를 만들어 보고 마진을 넣어 보고

박스 크기는 왜 안 맞지?

분명 박스 안에 패딩을 넣었는데 왜 적용이 안되지?

그렇게 정신 없이 css를 익힐 때쯤 들려오던 

sass sass sass!

sass와는 무관한 이미지 입니다

그때 당시에는 sass와 css의 큰 차이가 없는 거 같아 쭉 css를 선호해 왔다

리액트를 배우기 시작하면서 찰떡궁합이라고 하는 sass를 알아본다

 

css와 sass로 같은 코드를 작성 했을 때를 보도록 하자

CSS

.big-box {
  background-color: red;
}

.box {
  background-color: blue;
}

.box-font {
  font-size: 20px;
}

li {
  list-style: none;
}

SASS

.big-box {
  background-color: red;

  .box {
    background-color: blue;

    .box-font {
      font-size: 20px;
    }

    li {
      list-style: none;
    }
  }
}

이렇게 보면 

 

"그냥 html div를 부모자식요소로 감싸듯이 그냥 css를 감싸 놓은 거 아니야?"

맞다 그게 정답이다

여기서 우리가 sass를 사용하는 첫번째 이유이자 가장 기본적인 이유가 된다

 

sass를 사용하는 이유

html에서 태그에 클래스이름을 부여할 때 더 이상 지을 이름이 없어 고민을 해본 경험이 한두 번쯤 있을 것이다

더 이상 지을 이름이 없다...

 

그렇게 이름을 쭉쭉 지어 나가다 보면 중복되는 이름이 발생하게 되는데 css파일은 아무리 css파일을 쪼개어 작업을 하더라도

클래스 이름의 중복이 있다면 css의 속성이 중첩되는 현상이 발생하게 된다

 

오롯이 바닐라 자바스크립트로만 구현을 하는 프로젝트가 있다면 클래스 이름의 중복 현상을 막고자 이름 짓기에 매우 신경을 쓰게 돼 이러한 현상이 안 보일 수 있지만 리액트를 시작하게 되면 얘기가 달라지게 된다

 

리액트를 모르더라도 쉽게 풀어 얘기하자면 리액트에서는 페이지 안에서 여러 개의 기능을 쪼개어 개발을 하기 때문에 그 기능이 가지고 있는 css까지도 따로 관리한다 

그렇게 많은 css파일이 생기게 되고 또한 ui구현 과정에서 비슷한 로직이 발생되는 구간은 반복문 같은 걸 사용해서

코드를 줄이게 되는데 이때 html에서 태그마다 클래스 이름이 다르다면 기능을 따로 관리함에 있어

코드가 무분별하게 길어지기만 할 뿐이다

 

그래서 sass를 사용하여 css에서도 부모 자식 영역을 지정해줘 그 영역을 벗어나면 작동시키지 않게 하고 그로 인해 클래스 이름에 중복이 생기더라도 영역만큼만 관리를 해줘 이를 방지하는 것이다

 

이것을 sass의 네스팅 문법이라고 한다!

 

위에 코드를 보면 결론은 big-box라고 하는 영역 안에서만 box속성이, box속성 안에서만 box-font속성이 이런 식으로 적용되는 것이다

 

설치법은 워낙 많은 블로그에서 다루고 있으니 패스함!