CSS 전처리기란?
간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다.
- 내가 CSS를 보다 쉽게 작성할 수 있게
- 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게
- CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게
CSS 전처리기 프레임워크의 종류
왜 전처리기를 사용해야 하나
개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문
너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문
CSS 전처리기 사용시 장단점
장점:
- CSS 코드를 여러 파일로 나눠 유지보수성이 향상
- CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생
- 중첩 선택자를 작성하기 쉬움
- 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있음.
- 반복되는 CSS를 위한 Mixins 생성.
- Less는 자바스크립트로 작성되어, Node와 잘 작동합니다.
단점:
- 전처리기를 위한 도구가 필요, 다시 컴파일하는 시간이 느릴 수 있음
- Less에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와 혼동될 여지가 있음
- Sass에서는 노드 버전을 바꿀 때 자주 다시 컴파일해야 함
CSS 전처리기 사용 예시
유지보수성 확보
만약 전처리자를 사용한다면, 아래처럼 스타일시트를 여러 개로 쪼개 놓더라도 최종적으로는 컴파일된 1개의 스타일시트만을 서버에서 불러오게 되므로, CSS @import의 장점은 흡수하고 단점은 피해갈 수 있습니다.
// index.scss
@import "variables"
@import "mixins"
@import "modules"
@import "main/layouts"
@import "main/theme"
@import "sidebar/ads"
@import "sidebar/widgets"
// less
@color-black : #000000; // 변수선언
@color-white : #ffffff;
#header {
color : @color-black ; // 위에 선언한 변수를 불러온다.
background-color : @color-white;
}
셀렉터 중첩(연결)
CSS에서 반복해 선언해야만 했던 셀렉터(선택자)들을 한꺼번에 묶어 단순화시킬 수 있습니다.
구문이 좀 더 짧아지고, 부모 자식의 상하구조도 더욱 쉽게 파악할 수 있게 되었습니다.
// CSS
.link { color: #1A0DAB; }
.link:hover,
.link:focus {
text-decoration: underline;
}
.no-hover > .link:hover,
.no-hover > .link:focus {
text-decoration: none;
}
.link-external::after {
content: "^";
margin-left: .25em;
}
// Scss
.link {
color: #1A0DAB;
&:hover,
&:focus {
text-decoration: underline;
.no-hover > & {
text-decoration: none;
}
}
// 선택자도 연결 가능
&-external {
&::after {
content: "^";
margin-left: .25em;
}
}
}
@mixin box ($color:blue){ //@mixin 키워드를 이용해 정의
border : 1px solid $color;
background-color : #fdd;
}
#box a{
@include box //@include 키워드를 이용해 믹스인을 포함시킴
}
// less
@color-black : #000000;
@color-pink : #f96d9c;
@color-red : #ff0000;
@width-default : 500px;
div {
width : @width-default;
color : @color-black;
h3 {
width : @width-default;
color : @color-pink;
a {
color : @color-black;
}
}
h1 {
width : 300px;
color : @color-red;
}
}
.mixinEx (@pad:5px, @color-bg :#ffffff){
padding-top: @pad;
padding-bottom : @pad;
padding-right : @pad;
padding-left : @pad;
background-color : @color-bg;
}
h3 {
.mixinEx;
}
h2 {
.mixinEx(10px,#000000);
}
h3 {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
background-color: #ffffff;
}
h2 {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #000000;
}
전처리기 종류별 특징
Sass
- 가장 오래되었고, 가장 활발히 개발되고 있으며, 가장 많은 사람들이 선택한 라이브러리라 이용할거리가 많습니다.
- 막강한 내장 기능들을 갖고 있으며, Compass와 병용하면 리소스 경로를 직접 참조 가능해서, 특정 폴더 내 이미지를 모두 참조한다든가, 이미지 크기를 참조할 수도 있습니다.
- 디펜던시로서 ruby를 요구합니다. (Libsass라는 대체재 덕분에 완화되고 있지만 아직 완전하지는 않습니다.)
Less
- 브라우저에 내장된 JS 인터프리터만으로 컴파일 가능하므로 그만큼 디펜던시에서 자유롭습니다.
- Sass 다음으로 활발히 개척되고 있어서, 쓸만한 라이브러리나 mixin 구현물들을 제법 쉽게 찾을 수 있습니다.
Stylus
- 상대적으로 프로그래밍 언어의 특징을 많이 포함하고 있습니다.
- 위 특징 때문에, CSS 프로퍼티 내에서 연산자나 함수, 루프 등을 비교적 자유롭게 사용할 수 있습니다.
- 반대로 위 특징 때문에, 문법이 혼재해 있어서 처음 전처리를 시작하는 사람에게는 상대적으로 장벽이 높아 보입니다.
각 프레임워크마다 확실한 특징이 있기 때문에, 관심이 가는 것들을 조금씩 경험해 보고 나 또는 내 팀에 맞는 것을 선택해내는 것이 바람직하다고 할 수 있겠습니다.
반응형
'FrontEnd > CSS' 카테고리의 다른 글
| flexbox vs inline block (0) | 2024.07.18 |
|---|---|
| Stacking Context? Stacking Order? (0) | 2020.11.05 |
