✍🏼 CSS 전처리기 ?
자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램이다.
기존 CSS 이용시 모든 태그에 클래스나 id를 지정해줘야하며 상속, 중첩 기능이 없다보니 해당하는 태그 혹은 class로 코드를 작성하게 되고 그 결과 가독성이 떨어지고 코드가 길어진다.
그래서 이런 점을 보완해 개별의 특성을 가지고 등장한 것이 CSS 전처리기
css 전처리기는 코드가 브라우저로 보내지는 과정에서 컴파일 될 때 css형태로 브라우저에 띄워준다.
🤓 CSS 전처리기를 쓰는 이유 ?
CSS에 존재하지 않는 특징을 보완해서 나온 도구이기 때문에 CSS를 사용했을때 오는 단점을 보완해 가독성을 높이고 코드를 간단하게 작성할 수 있어 유지보수가 수월하다.
전처리기의 장점
일관된 테마를 위한 변수 사용해 여러 프로젝트에 걸쳐 테마 파일을 공유 가능.
중첩 선택자를 이용해 코드 작성이 쉽다.
반복되는 CSS를 위한 Mixins 생성이 가능하다.
전처리기의 단점
전처리기를 위한 도구가 필요하며, 컴파일되기까지 시간이 소요될 수 있다.
Less에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와 혼동될 여지가 있다.
💫 Sass ?
- 개별 style 파일 import 가능하다.
- if, for, while 등 변수 설정과 메서드 사용이 가능하다.
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else {
color: black;
}
}- 반복적으로 사용할 경우 mixin을 활용할 수 있다.
//mixin.scss
@mixin input-style($width, $color) {
background-color: $color;
border: $width solid $color;
}
.searchBar {
width: 100%;
@include input-style(1px, #e9e9e9);
padding: 0.5rem;
border-radius: 30px;
}Sass 사용 전에,,
컴파일하는 작업을 확인하거나 css폴더 경로 지정을 위해 vscode setting.json 수정이 필요하다.
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}Next.js와 함께 쓰기 위해,,
next.config.js 파일에 해당 속성을 추가해주어야한다.
//docs 참고 시 오류가 날 경우 _dirname을 지우고 작성 가능
sassOptions: {
includePaths: ["/styles"],
},CSS-IN-JS 와 CSS-in-CSS(CSS 전처리기) ?
- 공통점
속성(display:flex 등)이 적용되지 않는 브라우저들에 대신해서 UI가 동일하게 구현될 수 있도록 적용가능한 속성으로 대체 시켜준다.- 차이점
CSS-IN-JS는 JavaScript 환경을 최대한 활용할 수 있어 자바스크립트와 CSS 사이의 상수와 함수를 공유하고 현재 사용 중인 스타일만 DOM에 포함한다. 하지만 라이브러리 사용 등으로 CSS-in-CSS에 비해서는 속도가 느린 편이다.
✔️ 도움될 만한 블로그
CSS 전처리기 특징, Sass 정리, Next.js SASS 설정하기, CSS-in-js와의 차이
