LESS Language Features
이 글에서는 LESS에 관한 전체적인 숲을 보며 공부하는 시간을 가져보도록 하겠습니다.
이 파트가 먼저 선행된다면 조금 LESS Syntax 가 수월해 질 것입니다.
LESS OVERVIEW
지금부터 전반적인 LESS에 대해 알아봅니다.
Variables
LESS 변수는 다음 코드를 보면 이해하기 빠릅니다.
변수명은 @를 사용합니다.
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}#header {
color: #6c94be;
}주목!!! LESS에서 변수는 실질적으로 ‘상수(constants)'라고 할 수 있습니다.
그래서 한 번만 정의할 수 있습니다.
Mixins(믹스인)
믹스인은 한 규칙세트 안에서 속성 무리를 정의, 포함하도록 하는 방법입니다.
다음과 같은 클래스가 있다고 가정해 봅니다.
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}위와 같이 클래스 룰셋 안에 속성들을 작성합니다.
그리고 나서 아래와 같이 위 세트를 사용할 선택자 위치에 작성하면 됩니다.
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}Nested Rules(중첩 규칙)
LESS 는 CSS 케스케이딩 작성 방식 대신에 중첩 또는 조합하여 사용할 수 있는 능력을 부여합니다.
다음과 같은 일반적인 CSS 가 있다고 가정해 봅니다.
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}위에 작성된 방식을 LESS 에서는 다음과 같은 방법으로 작성할 수 있습니다.
h1 {
.mixin2(2px 3px 3 3 33 3;)
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}위와 같이 작성하면 다음과 같이 CSS로 컴파일됩니다.
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}LESS 작성 방식은 좀 더 간결하고 HTML 과 같은 구조를 흉내냅니다.
또한 사용자는 믹스인 방법을 이용하여 가상 선택자를 묶을 수도 있습니다.
아래에 고전적인 clearfix를 믹스인 방법으로 작성해 보겠습니다.(& 기호는 바로 위인 현재 선택자의 부모 선택자를 가리킵니다)
.clearfix {
display: block;
zoom: 1;
&:after { // &은 이 코드에서는 바로 위의 상위 선택자인 부모 선택자를 가리키고 있다
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}.clearfix {
display: block;
zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
Nested Directives and Bubbling(중첩된 지시자와 버블링)
media 와 keyframe 과 같은 지시어는 선택자처럼 중첩사용할 수 있습니다.
지시자는 상단에 배치되고 다른 요소들에 대한 상대적인 순서는 변경되지 않습니다.
조건부 지시어와 같은 @media, @supports 그리고 @document 는 그들 지시문 바디에 복사됩니다. 다음과 같이 :
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}@media screen {
.screen-color {
color: green;
}
}
@media screen and (min-width: 768px) {
.screen-color {
color: red;
}
}
@media tv {
.screen-color {
color: black;
}
}예를 들어, font-face 나 keyframes에 대한 비조건부 지시문들도 역시 버블링됩니다.
#a {
color: blue;
@font-face {
src: made-up-url;
}
padding: 2 2 2 2;
}#a {
color: blue;
}
@font-face {
src: made-up-url;
}
#a {
padding: 2 2 2 2;
}Operations(연산자)
산술 연산자인 +, -, *, /는 숫자, 색상이나 변수를 조작 할 수 있습니다.
변환이 불가능하거나 무의미한 것의 units은 무시될 것입니다.
// 숫자들은 동일한 단위로 변환된다.
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // 1.5cm
// 변환이 불가능하다(실제로 컴파일하여 사용하면 수치가 나오지만 기대하지 않은 수가 나올 것이다.
@incompatible-units: 2 + 5px - 3cm; // ???
// 변수로 쓴 예제
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%LESS는 단위를 연산하는 경우에는 단위를 인식해서 결과에 반영합니다.
@var: 1px + 5; // 6px 반환
@width: (@var + 5) * 2;
.operation {
width: @width;
border: (@width * 2) solid black;
}.operation {
width: 22px;
border: 44px solid black;
}Escaping(빠져나오기)
이스케이프는 속성 또는 변수의 값으로 임의의 문자열을 사용할 수 있습니다.
~"anything" 또는 ~'anything' 내부에 보간법(interpolation)을 제외하고 사용할 수 있습니다.(보간법은 추후에...)
가끔씩은 유효하지 않은 CSS 문법을 사용한다거나 LESS에서 인식하지 못하는 고유의 문법을 사용하여 CSS 값을 출력해야 할 경우가 발생할 수 있습니다.
LESS 가 인식하지 못하는 문법이라면 에러가 발생하여 컴파일이 되지 않기 때문에 이를 이스케이핑 처리하는 것입니다.
그런 값들을 나타내려면 ~ 기호를 앞에 붙여줍니다.
다음의 예를 살펴봅니다.
.ms-filter {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}.ms-filter {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}Functions(함수)
LESS 는 색상을 변환하고 문자열을 조작하고 수학을 할 수 있는 다양한 함수를 제공하고 있습니다.
이러한 함수들은 함수 레퍼런스에 문서화되어 있습니다.
함수를 사용하는 것은 꽤 간단합니다.
다음의 예는 0.5를 50%로 변환하고 5% 기본 색상의 채도를 증가시키고 25%를 밝게하며 8도 회전시켜서 배경색을 설정합니다.
.functions {
width: percentage(@width); // `50%` 반환
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}.functions {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}Namespaces and Accessors(네임스페이스와 접근자)
CSS @namespace 또는 네임 스페이스의 선택자와 혼동하지 마시기 바랍니다.
가끔은 팀(의 목적)을 위해, 또는 몇몇 캡슐화된 소스를 제공하기 위해, 변수나 믹스인을 그룹으로 묶고 싶을 수 있습니다.
LESS 에서는 매우 직관적인 방법으로 변수나 믹스인을 그룹으로 묶을 수 있습니다.
- 나중에 재사용을 하거나, 배포하기 위해서, 그룹으로 묶고 싶은 몇몇 믹스인과 변수들을 #bundle 안에 넣으세요.
.button클래스(믹스인)을 #header a 안에서 믹스인하려면, 다음과 같이 하면 됩니다:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab {
padding: 10px;
}
.citation {
line-height: 1;
}
}
#header a {
color: orange;
/* 믹스인 호출*/
#bundle > .button;
}#bundle .tab {
padding: 10px;
}
#bundle .citation {
line-height: 1;
}
#header a {
color: orange;
/* 믹스인 호출*/
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: white;
}Scope(범위)
LESS의 스코프는 일반 프로그래밍 언어와 매우 비슷합니다.
변수와 믹스인은 먼저 지역 스코프에서 찾고, 변수나 믹스인을 찾을 수 없는 경우에 컴파일러는 부모 범위에서 찾을 것입니다.
// 전역 스코프
@var: red;
#page {
// 지역 스코프
@var: white;
#header {
color: @var; // white (지역 스코프에서 먼저 찾는다)
}
}#page #header {
color: white;
}만약 지역스코프 내에 변수가 없다면 전역 스코프를 검색한다. 다음과 같이 :
@var: red;
#page {
#header {
color: @var; // red (지역 스코프에 없기 때문에 전역 스코프를 검색하여 찾는다)
}
}#page #header {
color: red;
}Comments(주석)
LESS의 주석은 자바스크립트 주석과 같습니다.
대신에 CSS에서 사용하는 /* ... */ 주석은 컴파일되어 CSS에 유지되지만 // 주석은 CSS에 출력되지 않습니다.
/* CSS-스타일 주석이고 CSS 에 유지됩니다. */
// 한줄짜리 주석으로 CSS 에서는 보이지 않습니다.
.comments { color: red }/* CSS-스타일 주석이고 CSS 에 유지됩니다. */
.comments {
color: red;
}
Importing(파일 불러오기)
메인 .less 파일 안에서 다른 .less 파일들과, 모든 변수들, 믹스인들을 불러들여 사용할 수 있습니다. .less 확장자는 선택사항이라서 아래 두 가지 형태 모두 사용 가능합니다:
@import "lib.less";
@import "lib";만약에 LESS가 처리하지 않고 CSS 파일 자체를 불러오고 싶다면, 그냥 .css 확장자를 사용하시기 바랍니다.
@import "lib.css";이렇게 불러들이면 CSS 파일을 아무 변환 없이 그대로 불러들여 보여주게 됩니다.
'StyleSheet > LESS' 카테고리의 다른 글
| LESS Parametric Mixins (0) | 2016.09.29 |
|---|---|
| LESS 변수 & 믹스인(Mixins) (2) | 2016.09.29 |
| LESS 변수 (0) | 2016.09.29 |
| LESS 사용 방법(컴파일) (0) | 2016.09.29 |
| Modern web LESS Framework(모던 웹 less 프레임워크) (0) | 2016.09.29 |
