CSS 자체는 복잡한 언어는 아니지만 프로젝트가 점점 커지고 고도화 될수록 유지보수가 어려워짐에 따라 전처리기와 라이브러리의 도움이 필요해졌다. 이를 통해 CSS에 없는 유용한 기능을 통해 유지보수의 편의성을 높일 수 있다.
Sass(SCSS)
Sass(SCSS)는 CSS를 편리하게 사용하기 위한 확장판 스크립트 언어. 곧바로 웹 적용이 되지 않고 컴파일 과정을 거쳐 CSS 파일로 변환 후 사용된다.
🤔 Sass와 SCSS?
Sass(Syntactically Awesome Style Sheets) 3버전에서 도입한 Sass의 모든 기능을 지원하는 CSS의 상위집합이 SCSS. CSS와 완전히 호환된다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.
Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능하고, 가장 오래된 CSS 확장 언어로 높은 성숙도, 넓은 커뮤니티를 가지고 있다.
Sass : 들여쓰기, 줄 바꿈
SCSS : 중괄호, 세미콜론 (CSS 호환성이 높다)
👍
- CSS보다 가독성이 높고, 구조화 하여 표현한다.
- 변수, 중첩, 믹스인, 상속 등 CSS의 유지보수 편의성을 향상시킨다.
👎
- 전처리기를 위한 컴파일러 도구, 시간이 필요하다.
- class명을 일일히 정해줘야 한다.
특징
1. 변수
스타일 시트 전체에서 재사용 가능한 정보를 $ 기호를 사용해 변수로 만들어 저장 할 수 있다.
2. 중첩
html의 동일한 시각적 계층 구조를 따라 선택자를 중첩할 수 있다. 다만 과도하게 중첩된 규칙은 유지 관리가 어렵기 때문에 주의해야 한다.
3. 모듈화
다른 SASS 파일에 포함 할 수 있는, 모듈화 된 파일을 만들 수 있다. _example.scss 밑줄을 통해 부분 파일이며 css파일로 생성되지 않아야 된다는 걸 알 수 있다. @use 규칙과 함께 사용된다.
4. 믹스인
재사용하려는 CSS 그룹을 만들어 사용할 수 있다. 여기에 $theme을 이용해 함수의 매개변수처럼 유연하게 사용 가능하다.
5. 확장/상속
@extend로 속성 집합을 공유 할 수 있다.
6. 연산자
수학 연산자를 사용 할 수 있다.
styled components
컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리다. 자바스크립트의 백틱을 이용한 템플릿 리터럴과 CSS 기능을 활용해 Styled-Components를 사용해 컴포넌트의 스타일을 지정 할 수 있다.
👍
- 컴포넌트 이름을 쓰듯 스타일 지정이 가능해 CSS가 전역으로 중첩되지 않는다.
- 컴포넌트의 props를 참조할 수 있어, 변수를 이용해 함수처럼 스타일 변환이 가능하다.
👎
- 전처리기를 위한 컴파일러 도구, 시간이 필요하다.
- 빠른 페이지 로드에 불리.
특징
1. 스타일 자동 삽입
화면에 컴포넌트가 렌더링 되었는지 추적해 스타일을 자동 삽입 한다. 최소한의 코드만으로 화면이 렌더링이 가능해진다.
2. 클래스 네임 오류 없음
스스로 className을 생성하기 때문에 중복, 오타로 인한 버그를 줄여준다.
3. CSS 삭제 용이
스타일 속성이 컴포넌트와 연결되어 있기 때문에 컴포넌트를 사용하지 않아 삭제 할 경우 스타일 속성 또한 삭제 된다.
4. 쉬운 유지보수
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일을 검색하지 않아도 되기 때문에 코드의 크기가 길어지더라도 유지보수가 어렵지 않다.
차이점
SCSS
- css in css, js 파일과 분리되어 있다.
- 컴포넌트의 상태값이 변화하더라도 반응이 쉽지 않다.
- 브라우저에 보여지지 않는 컴포넌트까지 읽기 때문에 불필요한 컴파일 과정이 추가된다.
styled-components
- css in js, 컴포넌트가 렌더링 될 때만 스타일 정보를 읽어온다.
- 동적인 이벤트가 많은 사이트라면 스타일 정보도 다시 읽어와야 하기 때문에 빠른 페이지 로드에 불리하다.
참고
https://velog.io/@gur0601/Styled-components%EC%99%80-SCSS-%EC%B0%A8%EC%9D%B4
https://jammanboo.tistory.com/19
