웹 애플리케이션의 스타일을 지정하는 일반적인 접근 방식은 CSS를 사용하는 것이지만, 그 복잡성으로 인해 디버깅이 어려울 수 있습니다.
스타일러스 CSS의 활용법을 익히면 현존하는 가장 널리 사용되는 CSS 전처리기 중 하나인 스타일러스 CSS를 또 하나의 대안으로 추가할 수 있습니다.
CSS 전처리기란 무엇인가요?
CSS 전처리기를 활용하면 보다 효율적이고 간소화된 방식으로 CSS(캐스케이딩 스타일 시트)를 작성할 수 있습니다. 이러한 전처리기는 일반적으로 고유한 구문으로 작성된 코드를 웹 브라우저에서 쉽게 인식할 수 있는 표준 .css 파일 형식으로 변환합니다.
Sass와 같은 CSS 전처리기를 활용하면 루프, 믹스인, 중첩 선택자, 조건문 등의 기능을 사용할 수 있는 등 다양한 이점을 누릴 수 있습니다. 이러한 기능을 전처리기에 통합하면 특히 대규모 프로젝트에서 다른 팀원들과 협업할 때 CSS 코드를 더욱 쉽게 관리할 수 있습니다.
CSS 프로세서를 활용하려면 컴파일러를 로컬 또는 프로덕션 서버에 설치해야 합니다. Vite와 같은 특정 프런트엔드 빌드 도구에서는 프로젝트 내에 LessCSS와 같은 CSS 전처리기를 통합할 수 있습니다.
스타일러스 CSS 작동 방식
로컬 환경에서 스타일러스를 설정하려면 컴퓨터에 Node.js와 Node 패키지 관리자(NPM) 또는 Yarn이 사전 설치되어 있어야 합니다. 설치를 진행하려면 터미널에서 다음 명령을 실행하세요:
npm install stylus
yarn add stylus
스타일러스 CSS 파일의 표준 파일명 확장자는 “.styl”입니다. 생성된 스타일러스 CSS 코드를 처리하려면 다음 명령을 사용할 수 있습니다:
stylus .
앞서 언급한 프로세스에는 여러 .styl 파일을 현재 디렉토리 내의 해당 .css 파일로 컴파일하는 작업이 포함되며, 이 작업은 스타일러스 컴파일러를 활용하여 수행할 수 있습니다. 이 유틸리티를 사용하면 –css 플래그를 사용하여 .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;
다음 텍스트는 보다 정교한 방식으로 작성되었습니다: “`css 이 연구 결과에 따르면 조직성과지수(OPI)로 측정한 직원 만족도와 조직 성과 사이에는 양의 상관관계가 있는 것으로 나타났습니다. 이 결과는 만족한 직원이 업무에 몰입하고 조직 목표 달성에 전념할 가능성이 높아 업무 태도 개선, 생산성 향상, 직장 생활의 질 향상, 결근률 감소, 고객 만족도 향상, 궁극적으로 조직의 성공으로 이어진다는 이전 연구를 뒷받침합니다. 따라서 직원 만족도 증진은 조직 성과를 향상시키기 위한 효과적인 인적 자원 전략의 필수 요소로 간주되어야 한다는 결론을 내릴 수 있습니다. 경쟁적인 비즈니스 환경이 점점 더 복잡해짐에 따라 조직은
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;
}
널 변수는 다음과 같이 괄호를 사용하여 표시할 수 있습니다:
empty-variable = ()
다른 속성 값을 참조할 때는 `@` 기호를 사용할 수 있습니다.예를 들어, `div`의 높이를 너비의 절반과 같도록 설정하려는 경우 다음 구문을 사용할 수 있습니다:
element-width = 563px
div
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 요소 내의 텍스트 정렬을 결정하는 기능적 접근 방식은 요소의 너비에 따라 값을 반환하는 함수를 만드는 것입니다. 너비가 400픽셀을 초과하는 경우 함수는 “center”를 반환하여 텍스트가 div의 중앙에 가로로 정렬되도록 할 수 있습니다. 반대로 너비가 400픽셀 미만이면 함수는 대신 “왼쪽”을 반환하여 div 내에서 텍스트가 왼쪽으로 정렬됩니다.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'
div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
앞서 언급한 코드 블록은 @ 기호로 표시된 참조를 통해 너비 속성 값을 활용하여 alignCenter 함수를 실행합니다. 이 함수는 정수 변수 ‘n’이 400을 초과하는지 여부를 평가하며, 이 경우 “center” 값을 반환합니다. 반대로 n이 200 미만이면 함수는 출력으로 “왼쪽”을 생성합니다.
컴파일러 실행 시 예상되는 결과는 다음과 같습니다:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
많은 프로그래밍 언어의 함수는 함수 정의 내의 위치 순서에 따라 인수를 받도록 구조화되어 있습니다. 따라서 특히 여러 매개변수를 전달해야 하는 경우 함수 호출 중 잘못된 매개변수 순서로 인해 잘못된 구성이 발생할 수 있습니다.
스타일러스에서 ‘명명된 매개변수’ 기능을 사용하여 함수를 호출할 때 매개변수 이름을 지정할 수 있습니다. “정렬된 매개변수”와 같이 인수를 특정 순서로 제공하는 대신 명명된 매개변수를 사용하면 함수 호출 내에 명시적으로 목적을 명시하여 유연성과 가독성을 높일 수 있습니다.
subtract(b:30px, a:10px) /*-20px*/
CSS 전처리기를 사용하는 경우
CSS 전처리기는 작업 프로세스의 효율성을 크게 향상시킬 수 있는 고급 유틸리티입니다. 특정 프로젝트에 적합한 도구를 선택하면 생산성이 향상될 수 있습니다. 그러나 프로젝트에 최소한의 CSS만 필요한 경우 CSS 전처리기를 사용하는 것이 과도할 수 있습니다.
복잡한 작업의 스타일 지정 프로세스를 용이하게 하는 함수, 루프, 믹스인 등의 기능을 고려할 때 다른 사용자와 협업하여 방대한 양의 CSS 코드를 관리하려면 전처리기를 사용하는 것이 좋습니다.