CSS 개발 전문가로서 그 한계를 잘 알고 있습니다. 다른 영역의 발전에도 불구하고 커뮤니티에서 자주 요구해 온 중첩 선택기 및 믹스인과 같은 기본적인 기능에는 여전히 부족합니다.
CSS의 “Less” 확장에는 다양한 고급 기능이 포함되어 있으며, 구문도 CSS와 매우 유사하여 CSS에 익숙한 사용자도 쉽게 배울 수 있습니다.
Less 설치 방법
JavaScript 패키지 관리자, NPM을 사용하여 Less를 설치하는 방법은 다음 명령을 실행하여 수행할 수 있습니다:
npm install less -g
설치가 완료되면 lessc 명령을 사용하여 .less 파일을 .css 형식으로 변환할 수 있습니다. 예를 들어, 다음 명령은 style.less의 컴파일을 용이하게 하여 style.css 문서를 생성합니다.
lessc style.less style.css
변수가 적은 파일
제가 도와드리겠습니다! Less에서 변수를 정의하는 구문은 일반 CSS의 구문과 약간 다릅니다. CSS에서는 “–” 연산자를 사용하여 변수를 정의하는 반면, Less에서는 “@” 기호 뒤에 변수 이름과 값을 사용하여 변수를 만들 수 있습니다. 그 예는 아래와 같습니다:
@width: 40px;
@height: 80px;
앞서 언급한 코드 세그먼트는 각각 40픽셀과 80픽셀의 값을 가진 두 개의 변수, 즉 ‘너비’와 ‘높이’를 생성합니다. 이 연습의 목적은 나중에 쉽게 사용자 정의할 수 있도록 자주 사용되는 CSS 속성을 변수 내에 정의하는 표준 절차를 보여주기 위한 것입니다. 수정 사항을 단일 참조 지점으로 제한하면 애플리케이션의 다양한 구성 요소에서 일관성을 유지하기가 더 쉬워집니다.
Less 파일 내에서 변수를 활용하려면 index.html 파일을 만들고 다음과 같은 플레이스홀더 콘텐츠를 포함할 수 있습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Hello from the children of planet Earth!
</div>
</body>
</html>
웹사이트의 스타일이 포함된 CSS 파일을 생성하려면 “style.less” 파일을 사용하여 필요한 코드를 포함할 수 있습니다. 다음은 파일에 추가할 수 있는 항목의 예입니다: “`css /* 배경색 설정 */ @background-color: #1E1E2D; /* 폰트 패밀리 정의 */ font-family: ‘Roboto’, 산세리프; /* 제목의 텍스트 색상 설정 */ @heading-text-color: #F7A600; /* 여백 및 패딩 값 설정 */ .margin { margin-top: 50px; } .padding { padding-left: 20px; padding-right: 20px;
@width: 400px;
@height: 400px;
@vertical-center: center;
@txt-white: white;
@bg-red: rgb(220, 11, 11);
@font-40: 40px;
div {
width: @width;
height: @height;
display: flex;
color: @txt-white;
background-color: @bg-red;
font-size: @font-40;
}
a.less 파일을 a.css 파일로 변환하는 과정은 lessc 명령을 실행하여 수행할 수 있습니다.
lessc style.less style.css
형식이 지정된 CSS 코드는 다음과 같은 특성을 나타내야 합니다:
div {
width: 400px;
height: 400px;
display: flex;
color: white;
background-color: #dc0b0b;
font-size: 40px;
}
웹 브라우저를 실행하면 사용자의 시야에 매혹적인 인터페이스가 표시되어야 합니다.
변수는 보간을 포함하여 Less 영역 내에서 광범위하게 활용되며, 선택자, URL 및 기타 지정의 기초가 됩니다. 보간을 통해 변수를 통합하는 프로세스는 다음과 같이 수행할 수 있습니다:
@custom-selector: container;
.@{custom-selector} {
padding: 10px;
margin: 10px;
border: solid 10px;
}
@{…} 구문의 활용은 앞서 언급한 코드 스니펫에서 확인할 수 있으며, 컴파일 시 지정된 변수가 선택자 역할을 하면 다음과 같은 결과가 생성됩니다.
.container{
padding: 10px;
margin: 10px;
border: solid 10px;
}
Less의 산술 연산
Less에서 제공하는 서비스는 상수, 값 및 변수 식에 모두 적용할 수 있는 더하기, 빼기, 나누기, 곱하기 등의 수학 연산까지 포함하도록 확장되어 있습니다.
@variable-1: 5px;
// Multiplication Operation between variable and constant
@variable-2: @variable-1 * 2
// Addition operation between value and variable.
@variable-3: 10px + @variable-2
믹스인 사용 방법
믹스인을 활용하면 스타일시트 전체에서 스타일 요소(또는 CSS 코드)를 재사용할 수 있습니다. Sass와 같은 다른 CSS 개선 사항도 유사하게 믹스인을 제공합니다. Less에서 믹스인 작동을 시연하기 위해 index.html을 생성하고 다음 코드를 통합해 보세요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
</body>
</html>
웹사이트 디자인의 일관성을 보장하기 위해 웹사이트 개발에 참여하는 모든 팀원이 따라야 할 일련의 지침을 수립할 것입니다. 이를 위해 타이포그래피, 색상, 간격 및 기타 시각적 측면과 같은 요소의 스타일링에 대한 구체적인 규칙이 포함된 “style.less” 파일을 생성할 것입니다. 다음은 파일에 포함될 수 있는 지시문의 몇 가지 예입니다: “`css /* 글꼴 패밀리 설정 */ @font-face { src: url(“Roboto-Regular.ttf”); font-family: Roboto; } /* 기본 색상 설정 */ @primary-color: #5B8FF9; /* 실제 값으로 대체 */ /* 기본 글꼴 크기 설정 */ @base-font-size
.sample-text() {
background-color: yellow;
}
.first-letter() {
background-color: red;
color: white;
font-size: 30px;
}
p {
.sample-text();
}
p::first-letter {
.first-letter();
}
이 코드는 두 개의 믹스인 클래스, 즉 “.sample-text”와 “.first-letter”로 구성됩니다. 이러한 믹스인을 CSS 파일의 다른 부분에 적용하려면 클래스 선택기 끝에 괄호 안에 이름을 언급하면 됩니다(예: .mixin()). 혼합된 결과물은 아래와 같이 웹 브라우저에 표시됩니다.
스타일 중첩
제가 좀 더 쉽게 설명해드리겠습니다. 두 개의 자식 요소(하나는 단락 요소(p)이고 다른 하나는 다른 div 요소)가 있는 부모 div 컨테이너가 있다고 가정해 보겠습니다.p 요소 내의 텍스트는 빨간색으로 표시하고 div 요소는 녹색으로 표시하도록 설정하여 스타일적으로 차별화하려면 다음과 같은 전략을 사용할 수 있습니다.
div p {
color: red;
}
div {
color: green
}
다른 전처리기에 비해 Less에서 제공하는 기능 세트는 줄어들었지만 중첩된 규칙 구현을 통해 비슷한 수준의 기능을 달성할 수 있습니다. 따라서 Less의 기능은 다음과 같이 요약할 수 있습니다:
div {
color: green;
p {
color: red;
}
}
“&” 기호를 부모 선택자를 참조할 때 더 짧은 표기법과 함께 사용하면 코드의 이해가 쉬워지고 유지보수성이 향상됩니다.
button {
background-color: blue;
border: none;
&:hover {
background-color: grey;
transform: scale(1.2);
}
}
제공된 코드를 구현하면 결과 CSS 출력은 다음과 같아야 합니다:
button {
background-color: blue;
border: none;
}
button:hover {
background-color: grey;
transform: scale(1.2);
}
범위와 함수의 이해
프로그래밍 언어의 표준 구문에 따라 변수의 수명은 변수가 선언된 블록의 범위로 제한됩니다. 이 현상을 설명하기 위해 “index.htm”이라는 새 파일을 생성하고 앞서 언급한 초기 HTML 템플릿을 삽입합니다. 그런 다음 ‘본문’ 태그 내에 다음 코드 세그먼트를 추가합니다:
<div class="outer-div">
Outer Div should be red.
<br />
<span class="inner-div">
Inner div should be green.
</span>
</div>
white; /* 흰색 텍스트 */ text-align: center; /* 중앙에 텍스트 */ padding: 14px 16px; /* 일부 여백 */ text-decoration: none; /* 밑줄 없음 */ } /* 마우스오버 시 링크 색상 변경 */ } .topnav a:hover { color: #ddd; /* 회색 색상 */ background-color: #555; /* 밝은 회색(#2E
@bg-color: red;
body {
font-size: 40px;
color: white;
margin: 20px;
}
.inner-div {
@bg-color: green;
background-color: @bg-color;
}
.outer-div {
background-color: @bg-color;
}
) 이전 텍스트에서 사용된 언어를 다음과 같이 다듬었습니다: “다른 `div` 안에 중첩된 `div` 요소 내에서 `bg-color` 변수는 해당 특정 블록에만 한정되도록 재정의됩니다. 따라서 특정 클래스에 녹색 색조를 적용해도 일반 `bg-color` 변수에는 영향을 미치지 않습니다. 웹 브라우저에서 출력을 컴파일하고 열면 다음과 같은 시각적 표시가 관찰되어야 합니다:
Less 프레임워크는 특정 상황에서 유용하게 사용할 수 있는 유용한 기능을 제공합니다. 이러한 기능 중 하나는 구문은 다음과 같은 “if” 함수입니다:
if((condition), value1, value2)
이 코드는 특정 조건의 충족 여부에 따라 “value1” 또는 “value2” 중 지정된 값을 반환합니다. 이 개념에 대한 예시적인 그림은 다음과 같습니다:
@var1: 20px;
@var2: 20px;
div {
padding: if((@var1 = @var2), 10px, 20px);
}
제공된 코드를 처리할 때 생성되는 출력 CSS는 다음과 같습니다:
div {
padding: 10px;
}
Less 및 기타 CSS 확장으로 더 많은 작업 수행
인상적인 수의 개발자가 Less를 활용하여 CSS 코딩을 더 보기 좋게 렌더링합니다.함수, 믹스인, 변수 등 주목할 만한 기능의 통합은 Less가 제공하는 포괄적인 혜택 중 극히 일부분에 불과합니다.
Less의 다재다능함은 소규모 및 대규모 디자인 작업 모두에 이상적인 선택입니다. Sass 및 Stylus CSS와 같은 대체 CSS 전처리기 언어가 존재하며, 이 언어들 역시 뛰어난 기능을 제공하므로 살펴볼 가치가 있습니다.