Less CSS 전처리기는 뛰어난 기능과 다용도로 최근 널리 인정받고 있는 고도로 발전되고 적응력이 뛰어난 도구입니다. 전처리기로서, 전반적인 스타일링 프로세스를 향상시키는 포괄적인 범위의 추가 속성과 기능을 제공하여 웹 개발에 활용되는 기존 CSS(Cascading Style Sheet)를 보완하는 데 유용합니다.
CSS 작성에 대해 능숙하게 이해하면 추가 학습이 거의 필요하지 않으므로 Less CSS를 활용하는 방향으로 원활하게 전환할 수 있습니다. 이 둘의 호환성을 통해 이전의 CSS 전문 지식은 유지하면서 Less가 제공하는 향상된 기능을 활용할 수 있습니다.
함수란 무엇이며 왜 중요한가요?
프로그래밍에서 함수는 특정 연산 또는 일련의 연산을 실행하는 독립된 코드 단위로, 프로그램 내에서 여러 번 호출하여 다른 입력에 대해 동일한 연산을 수행할 수 있습니다. 함수에 전달된 매개변수는 함수의 입력을 정의하고, 함수가 반환하는 값은 함수의 출력을 나타냅니다.
중복 제거 도구를 사용하면 프로그램 내에서 반복되는 코드를 제거하는 프로세스를 간소화할 수 있습니다. 예를 들어 JavaScript와 같은 프로그래밍 언어로 사용자가 입력한 가격을 기준으로 할인을 계산하는 프로그램을 개발했다고 가정해 보겠습니다. 이러한 프로그램은 중복 제거 도구를 사용하여 구현할 수 있습니다.
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
제공된 함수를 호출하고 지정된 임계값과 함께 가격 정보를 전달하여 활용할 수 있습니다.
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
추상화 과정을 통해 프로그램의 가독성을 높이는 동시에 할인 확인을 처리할 수 있는 기능 모듈을 제공했습니다. 이러한 모듈식 접근 방식은 기본 구성 요소에 불과하지만 함수 활용을 통해 사용할 수 있는 잠재적 기능의 예시 역할을 합니다.
더 적은 CSS로 함수 이해하기
기존의 CSS(Cascading Style Sheet) 사용은 개발자가 사용할 수 있는 함수를 최소한의 범위로만 제한합니다. 이러한 함수 중 계산() 수학 연산은 계산을 수행하고 그 결과를 CSS 내에서 속성 값으로 활용할 수 있다는 점에서 두드러집니다.
p{
background-color: red;
width: calc(13px - 4px);
}
Less에서 if 함수의 활용은 단순한 산술 계산 이상의 연산을 수행하는 데 사용됩니다. 이 함수는 미리 정해진 조건과 두 개의 고유한 값이라는 세 가지 매개변수를 허용하여 구현됩니다.이 기호의 적용 예는 아래 제공된 코드 세그먼트에서 확인할 수 있습니다:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
앞서 언급한 코드 블록은 Less 컴파일러에 의해 처리되며, “@” 기호로 지정된 변수의 너비가 높이보다 큰지 여부를 평가합니다. 이 비교에서 양수 결과가 나오면 함수는 이 평가 직후 10픽셀의 값을 반환합니다. 반대로 비교 결과가 음수이면 함수는 20픽셀의 값을 출력으로 반환합니다.
스타일시트를 어셈블한 후 결과 CSS 코드는 다음 형식과 유사한 구조를 보여야 합니다:
div {
margin: 20px;
}
부울을 짧게 사용하는 방법
부울 변수는 ‘참’ 또는 ‘거짓’의 두 가지 잠재적 값만 보유하는 데이터 유형입니다. Less에서 부울() 함수를 사용하면 표현식의 평가 결과를 변수 내에 참 또는 거짓으로 저장할 수 있으며, 이를 나중에 사용할 수 있습니다. 이 함수의 작동은 아래에 설명되어 있습니다.
@text-color: red;
@bg-color: boolean(@text-color = red);
위에서 Less 컴파일러는 “text-color” 값이 “red”로 설정되어 있는지 확인하기 위해 검증을 수행합니다. 그 후 “bg-color” 변수에 앞서 언급한 값이 할당됩니다.
div{
background-color: if(@bg-color,green,yellow);
}
제공한 코드 블록은 필요한 라이브러리를 가져오고, 일부 변수와 함수를 정의하고, 데이터 전처리를 위한 알고리즘을 실행하는 Python 스크립트입니다. 알고리즘의 출력은 확장자가 “.txt”인 “output\_file”이라는 파일에 저장됩니다.
div {
background-color: green;
}
replace() 함수로 문자열 내 텍스트 바꾸기
`replace()` 함수의 구문은 다음과 같은 형태로 나타납니다:
replace(string, pattern, replacement, flags)
주어진 문은 “패턴”으로 알려진 지정된 입력 문자열 내에서 해당 “대체” 값을 사용하여 문자열을 검색하고 대체하는 기능에 관한 것입니다. 이 작업은 Less CSS 컴파일러에 의해 수행됩니다. 입력 “문자열”에는 문자열로 표시되는 정규식이 포함될 수 있지만 패턴으로 사용하는 것이 더 일반적입니다. 일치하는 패턴을 식별하면 컴파일러는 원래 문자열 내에서 대체 값을 대체합니다.
replace() 함수의 선택적 매개 변수에는 정규식 플래그를 지정하기 위한 flags 매개 변수가 포함됩니다.
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
앞서 언급한 코드를 실행하면 다음과 같은 출력이 생성됩니다:
div::before {
content: "Hi";
}
Less CSS로 함수 나열
Less에서는 쉼표나 공백을 사용하여 일련의 값을 구분합니다.
@groceries: "bread", "banana", "potato", "milk";
length() 함수를 사용하면 목록에 포함된 요소의 수를 확인할 수 있습니다.
@result: length(@groceries);
`extract()` 함수를 사용하면 지정된 인덱스의 목록 또는 문자열에서 특정 항목을 검색할 수 있습니다. 예를 들어, ‘식료품’ 목록에서 세 번째 요소를 가져오려면 다음과 같은 작업을 실행합니다:
@third-element: extract(@groceries, 3);
목록의 인덱스가 0에서 시작하는 일반적인 프로그래밍 언어와 달리, Less CSS에서 목록의 시작 인덱스는 항상 1입니다.
범위의 시작점, 끝점, 범위 내에서 항목을 늘리거나 줄이는 선택적 값을 지정할 수 있습니다.
div {
margin: range(10px, 40px, 10);
}
주어진 코드는 다음과 같이 보다 우아하고 세련된 방식으로 작성할 수 있습니다:
div {
margin: 10px 20px 30px 40px;
}
Less CSS 컴파일러는 기준값인 10픽셀로 시작하여 이전 값을 10단위씩 증가시켜 최종 위치인 40픽셀에 도달합니다.
Less CSS 함수로 간단한 웹사이트 구축하기
디렉토리를 설정하고 그 안에 style.less 파일과 함께 index.html 파일을 포함해야 하는 Less CSS의 원칙을 구현하여 지식과 숙련도를 통합할 때가 왔습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
위에는 현재 콘텐츠가 없는 상태로 남아 있는 h1 컴포넌트를 포함하는 부모 컨테이너 div가 있습니다. 스크립트 태그의 소스 코드는 Less CSS 컴파일러의 위치를 가리킵니다.
앞서 언급한 문장은 코드의 실행이 앞서 언급한 스크립트 태그의 존재에 따라 좌우된다는 점을 강조하고, 나아가 터미널 내에서 특정 명령을 실행하는 방식으로 노드 패키지 관리자(NPM)를 활용하여 컴퓨팅 장치에 Less CSS를 설치하는 대체 방법을 제안합니다.
npm install -g less
사용자의 편의에 따라 다음 명령을 실행하여 .less 파일을 조립하세요. 컴파일러가 출력을 작성할 파일을 지정해야 합니다.
lessc style.less style.css
Style.less 파일에서 ‘container’ div의 중요한 속성, 특히 너비와 배경색을 각각 나타내는 ‘container-width’와 ‘container-bg-color’라는 두 개의 변수를 정의하는 것이 좋습니다.
@container-width: 50rem;
@container-bg-color: yellow;
다음 코드를 활용하여 문자열, 패턴, 대체 등 세 가지 변수를 설정하고 컨테이너 div와 h1 태그에 필요한 스타일을 구현합니다.
@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";
.container{
width: @container-width;
background-color: @container-bg-color;
padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
border: solid;
}
h1:first-child::after{
content: replace(@string,@pattern,@replacement);
}
앞서 언급한 코드 블록은 range() 함수를 사용하여 “container” div에 패딩 속성을 부과합니다. 그 결과 Less 컴파일러는 style.less 파일을 처리하고 다음과 같은 CSS 출력을 생성합니다:
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
웹 브라우저에서 index.html 파일을 열면 다음과 같은 콘텐츠가 표시되어야 합니다:
CSS 전처리기로 생산성 향상
프로그래밍 언어의 함수는 필요한 코드의 양을 줄이고 실수할 가능성을 줄여주기 때문에 유리합니다. 또한 Less와 같은 CSS 전처리기는 CSS 코드 생성을 용이하게 하는 다양한 기능을 제공합니다.
CSS 전처리기를 활용하면 상당한 양의 파일을 처리할 때 매우 유용할 수 있습니다. 디버깅 기능이 향상되어 개발자의 워크플로우가 더욱 효율적이고 궁극적으로 전반적인 생산성 향상에 기여하기 때문입니다.