• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 Sass, Less, Stylus, SCSS

지금까지 우리가 배워왔던 CSS는 웹 페이지의 스타일을 설정하는 언어입니다. 이를 통해 글꼴, 색상, 레이아웃 같은 시각적인 요소들을 정의할 수 있죠. 하지만 CSS를 사용하다 보면 코드가 점점 복잡해지고, 유지보수가 어려워질 수 있습니다. 이 문제를 해결하기 위해 등장한 것이 "CSS 전처리기"입니다. 이제 각 전처리기들을 설명해볼게요!

CSS 전처리기란?

CSS 전처리기는 CSS를 더 쉽게, 더 효율적으로 작성할 수 있도록 도와주는 도구입니다. CSS 자체는 기능이 제한적이지만, 전처리기를 사용하면 더 복잡한 기능들을 사용할 수 있습니다. 전처리기를 통해 작성한 코드는 나중에 일반 CSS로 변환되어 웹 브라우저에서 사용할 수 있게 됩니다.

이제 대표적인 CSS 전처리기들인 Sass, Less, Stylus, SCSS를 하나씩 살펴볼게요.

Sass (Syntactically Awesome Stylesheets)

Sass는 CSS를 더 효율적으로 작성할 수 있게 도와주는 가장 오래된 전처리기 중 하나입니다. 복잡한 CSS 작업을 더 간단하게 처리할 수 있도록 변수, 중첩(Nesting), 믹스인(Mixin) 같은 기능들을 제공합니다.

• 변수: 색상이나 폰트 크기 같은 값을 변수로 저장해서 재사용할 수 있습니다.
• 중첩(Nesting): CSS 선택자를 더 직관적으로 쓸 수 있게 해줍니다.
• Mixin: 자주 사용하는 CSS 코드 조각을 재사용할 수 있게 도와줍니다.

Sass는 .sass 확장자를 사용하며, 좀 더 간단한 문법을 가지고 있습니다. 중괄호 {}나 세미콜론 ; 없이도 작성할 수 있는 게 특징입니다.

Less (Leaner Style Sheets)

Less는 Sass와 비슷한 기능을 제공하는 CSS 전처리기입니다. Sass와 마찬가지로 변수, 중첩, 믹스인을 지원하며, 특히 JavaScript와의 호환성이 좋은 점이 특징입니다.

• 변수: Sass와 비슷하게, 색상이나 길이 등을 변수로 저장할 수 있습니다.
• 연산: Less는 CSS 속성에 수학적 연산을 지원합니다. 예를 들어, 너비를 @width: 100px + 50px;처럼 계산할 수 있습니다.

Less는 주로 자바스크립트 기반 프로젝트에서 많이 사용되며, .less 파일 확장자를 사용합니다.