Sass

CSS preprocessor

CSS의 불편함을 개선하고자 나온 기술이 있다.
CSS preprocssor, CSS전처리기
: 문법적으로 편리하게 작성할 수 있도록 제공하는 양식에 맞게 파일을 작성하면, 실제 실행 전 브라우저가 읽을 수 있는 CSS파일로 변혼 시켜주는 일을 한다.

Sass & Scss

Sass (Syntatically Awesome Style Sheets)

Sass설치

npm install sass

Sass ? Scss ?

근래는 Scss사용법을 권장하고 있다. 이유는 scss가 넓은 범용성과 css 호환성의 장점을 갖고 있기 때문이다.

Scss 사용법

1. 확장자명 .scss 수정
2. 스타일이 깨질 수 있는데 이유는? SPA와 연관되어 있습니다. MPA 환경에서는 각각의 페이지마다 CSS 파일을 독립적으로 import해 사용하기 때문에 선택자가 해당 페이지에서만 중복되지 않으면 됐지만, SPA 환경에서는 각각의 JS 파일에서 독립적으로 CSS 파일을 import 했다 하더라도, Router.js에 모든 페이지 컴포넌트가 모이고, index.js를 거쳐 결국 index.html에 모이게 되는 구조기 때문에
3. 문제를 해결하기 위한 방법으로는 모든 태그에 className을 다르게 주는 방법과 CSS의 자손결합자를 사용하는 방법이 있습니다. className을 모두 다르게 주는 방법은 처음에는 가능할지 몰라도, 컴포넌트가 많아지고 관리하는 태그들이 많아지게 된다면 나도 모르게 중복해서 사용하는 className이 있을 수 있고, 그렇게 된다면 유지보수를 하거나 에러를 고치는데 상당히 복잡해질 수 있는 문제점

자손결합자 방법

1. 최상위 태그의 className에 컴포넌트 이름과 동일한 className을 부여한다.
2. depth가 깊어지더라도 자손결합자는 스타일을 적용하고 싶은 선택자 앞에 조상 선택자 (부모의 부모 / 부모의 부모의 부모 ...)를 입력해 정확하게 해당 요소를 선택할 수 있는 CSS 문법이기 때문에 자손결합자를 사용하면 CSS가 겹치는 문제를 해결할 수 있습니다. 하지만 사용할 때마다 매번 조상 선택자를 작성해 줘야 하기 때문에 적용해야 할 스타일이 많아지면 쓰기 불편해지게 됩니다. 이때, 우리는 Sass의 nesting 기능을 통해 자손결합자를 더 편하게 작성해 줄 수 있습니다.
   

Sass - nesting, 변수, &선택자, mixin

summary
sass는 css문법을 편하게 작성할 수 있게 하는 문법이다

reference: wecode

ref. https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC