스타일러스 CSS란 무엇이며 어떻게 사용합니까?
웹 개발에서 스타일 지정의 중요성과 CSS의 어려움
웹 애플리케이션의 디자인을 꾸미는 데 가장 흔히 사용되는 기술은 CSS입니다. 하지만 CSS는 오류를 찾고 수정하기가 어렵다는 단점이 있어 작업하기에 번거로울 수 있습니다.
스타일러스(Stylus) CSS를 배우면, 널리 사용되는 CSS 전처리 도구 중 하나를 사용할 수 있는 새로운 선택지가 생깁니다.
CSS 전처리기의 정의
CSS 전처리기는 CSS 코드를 더 쉽게 작성하도록 돕는 도구입니다. 일반적으로, 자체적인 특수 문법으로 작성된 코드를 브라우저가 이해할 수 있는 .css 파일 형식으로 변환합니다.
예를 들어 Sass와 같은 CSS 전처리기는 반복문, 믹스인, 중첩 선택자, if/else 조건문과 같은 고급 기능을 제공합니다. 이러한 기능들은 특히 여러 사람이 함께 작업하는 대규모 프로젝트에서 CSS 코드를 더 효율적으로 관리할 수 있도록 합니다.
CSS 전처리기를 사용하려면 개발 환경이나 프로덕션 서버에 컴파일러를 설치해야 합니다. Vite와 같은 일부 프런트엔드 빌드 도구는 LessCSS와 같은 CSS 전처리기를 프로젝트에 쉽게 통합할 수 있는 기능을 제공합니다.
스타일러스 CSS의 작동 원리
스타일러스(Stylus)를 로컬 환경에 설치하려면 컴퓨터에 Node.js와 NPM(Node Package Manager) 또는 Yarn이 설치되어 있어야 합니다. 다음 명령어를 터미널에 입력하여 설치할 수 있습니다.
npm install stylus
또는
yarn add stylus
스타일러스 CSS 파일은 .styl 확장자로 저장됩니다. .styl 파일에 작성한 코드는 다음 명령어를 사용하여 .css 파일로 컴파일할 수 있습니다.
stylus .
이 명령어는 현재 디렉토리의 모든 .styl 파일을 찾아 .css 파일로 변환합니다. 스타일러스 컴파일러는 --css 플래그를 사용하여 .css 파일을 .styl 파일로 변환하는 기능도 제공합니다. 다음은 .css 파일을 .styl 형식으로 변환하는 명령어입니다.
stylus --css style.css style.styl
스타일러스 CSS 문법 및 부모 선택자
일반적인 CSS에서는 중괄호를 사용하여 스타일 블록을 정의합니다. 중괄호를 생략하면 스타일이 제대로 적용되지 않습니다. 하지만 스타일러스 CSS에서는 중괄호 사용이 필수가 아닙니다.
스타일러스는 파이썬과 유사한 문법을 지원합니다. 즉, 중괄호 대신 들여쓰기를 사용하여 스타일 블록을 정의할 수 있습니다. 다음 예시를 참고하세요.
.container
margin: 10px
위 코드는 다음 CSS로 컴파일됩니다.
.container {
margin: 10px;
}
Less와 같은 다른 CSS 전처리기와 마찬가지로, & 기호를 사용하여 부모 선택자를 참조할 수 있습니다.
button
color: white;
&:hover
color: yellow;
위 코드는 다음과 같이 컴파일됩니다.
button {
color: #fff;
}button:hover {
color: #ff0;
}
스타일러스 CSS에서 변수 사용하기
Less CSS와 같은 다른 CSS 전처리기는 @ 기호를 사용하여 변수를 정의하지만, 기존 CSS에서는 "--"를 사용하여 변수를 정의합니다.
스타일러스에서는 변수 정의 방식이 조금 다릅니다. 변수를 정의하기 위해 특별한 기호를 사용할 필요 없이, 등호(=)를 사용하여 변수를 값에 할당합니다.
bg-color = black
이제 .styl 파일에서 정의한 변수를 다음과 같이 사용할 수 있습니다.
div
background-color: bg-color
위 코드는 다음 CSS로 컴파일됩니다.
div {
background-color: #000;
}
괄호를 사용하여 null 변수를 정의할 수도 있습니다. 예를 들어 다음과 같이 할 수 있습니다.
empty-variable = ()
@ 기호를 사용하여 다른 속성 값을 참조할 수도 있습니다. 예를 들어 div의 높이를 너비의 절반으로 설정하려면 다음과 같이 코드를 작성할 수 있습니다.
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
위 방법처럼 변수를 사용하거나, 변수를 선언하지 않고 width 속성 값을 바로 참조하는 방법도 있습니다.
div
width: 563px
height: (@width / 2)
이 코드에서 @ 기호를 사용하면 div 요소의 실제 너비 속성을 참조할 수 있습니다. 어떤 방법을 사용하든, .styl 파일을 컴파일하면 다음과 같은 CSS 코드를 얻을 수 있습니다.
div {
width: 563px;
height: 281.5px;
}
스타일러스 CSS의 함수 사용
스타일러스 CSS에서는 값을 반환하는 함수를 만들 수 있습니다. 예를 들어 div의 텍스트 정렬 속성을 너비가 400px보다 크면 "center"로, 400px 미만이면 "left"로 설정하는 함수를 만들어 보겠습니다. 이러한 논리를 처리하는 함수는 다음과 같이 만들 수 있습니다.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
위 코드에서는 @ 기호를 사용하여 width 속성 값을 alignCenter 함수에 전달합니다. alignCenter 함수는 전달받은 매개변수 n이 400보다 큰지 확인하고, 크다면 "center"를 반환합니다. n이 200보다 작으면 "left"를 반환합니다.
컴파일러를 실행하면 다음과 같은 결과가 생성되어야 합니다.
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
대부분의 프로그래밍 언어에서 함수는 매개변수가 전달된 순서대로 값을 할당합니다. 이로 인해 잘못된 순서로 매개변수를 전달하여 실수가 발생할 수 있으며, 전달해야 하는 매개변수가 많아질수록 더욱 그렇습니다.
스타일러스는 명명된 매개변수라는 해결책을 제공합니다. 함수를 호출할 때 순서대로 매개변수를 전달하는 대신 다음과 같이 명명된 매개변수를 사용할 수 있습니다.
subtract(b:30px, a:10px)
CSS 전처리기를 사용해야 하는 경우
CSS 전처리기는 작업 과정을 간소화하는 데 유용한 강력한 도구입니다. 프로젝트에 적합한 도구를 선택하면 생산성을 크게 향상시킬 수 있습니다. 프로젝트에서 CSS 코드가 많지 않다면 CSS 전처리기를 사용하는 것이 불필요할 수 있습니다.
하지만 대규모 프로젝트를 진행하거나, 여러 명이 함께 작업하여 많은 양의 CSS 코드가 필요한 경우 전처리기를 사용하는 것을 고려해 보세요. 전처리기는 복잡한 프로젝트에서 스타일을 쉽게 지정할 수 있도록 다양한 기능과 반복문, 믹스인 등을 제공합니다.