반응형
CSS Preprocessor
Hexo 의 테마인 icarus 에서 Stylus
를 사용하고 있어서
Stylus 에 대해서 공부하다가
CSS 전처리기(CSS Preprocessor) 에 대해서 정리해놓으려고 합니다.
CSS 전처리기란?
CSS 가 복잡해지면서 CSS 코드가 늘어나니 프로그램 처럼 관리하려고 나타난 게
CSS 전처리기(CSS Preprocessor) 입니다.
CSS 전처리기 구조
작성은 Syntax 에 맞게 프로그래밍 하고 컴파일러를 통해서 css 파일로 결과물이 나오는 구조
CSS 전처리기 종류
가장 유명한 CSS 전처리기는 아래 3종 입니다
장점
- 재사용성 : 프로그래밍이 가능하니 반복적인 항목을 줄일 수 있다
- 유지보수좋음 : 상속, 중첩을 통해 구조화된 코드로 유지 가능
단점
- 외국이야 퍼블리셔라는 직무가 없는데
- 이걸 프론트앤드 개발자가 아닌 퍼블리셔들이 만든다고
CSS 전처리기 구문 비교
LESS
.border-radius (@radius) {
-webkit-border-radius: @radius;
-o-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
.user-list {
// need to use special `.` syntax
.border-radius(10px);
}
Sass
@mixin border-radius($radius)
-webkit-border-radius: $radius
-o-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.user-list
// need to use special `@` syntax
@include border-radius(10px)
Stylus
border-radius()
-webkit-border-radius: arguments
-o-border-radius: arguments
-moz-border-radius: arguments
-ms-border-radius: arguments
border-radius: arguments
.user-list
border-radius: 10px
선택
그냥 3개 중에 마음에 드는 거 사용하시면 됩니다
반응형
'IT > HTML' 카테고리의 다른 글
echarts 를 티스토리에서 사용할 수 있는 지 테스트 합니다 (0) | 2022.10.20 |
---|---|
Escape Characters 리스트 (0) | 2022.07.22 |
mermaid 테스트용 html (0) | 2022.07.07 |
CSS Cheatsheet (0) | 2022.06.28 |
언어코드 (Language Code) (0) | 2022.06.28 |
국가코드 (Country Code) (0) | 2022.06.28 |
색상명 (Color Names) (0) | 2022.06.27 |
SEO(Search Engine Optimization) 요약 (0) | 2022.06.27 |