LESS Syntax 시작하기

LESS Language Features

이 글에서는 LESS에 관한 전체적인 숲을 보며 공부하는 시간을 가져보도록 하겠습니다.

이 파트가 먼저 선행된다면 조금 LESS Syntax 가 수월해 질 것입니다.

LESS OVERVIEW

지금부터 전반적인 LESS에 대해 알아봅니다.

Variables

LESS 변수는 다음 코드를 보면 이해하기 빠릅니다.

변수명은 @를 사용합니다.

less

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

컴파일된 css

#header {
  color: #6c94be;
}

주목!!! LESS에서 변수는 실질적으로 ‘상수(constants)'라고 할 수 있습니다. 

그래서 한 번만 정의할 수 있습니다.

Mixins(믹스인)

믹스인은 한 규칙세트 안에서 속성 무리를 정의, 포함하도록 하는 방법입니다.

다음과 같은 클래스가 있다고 가정해 봅니다.

less

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

위와 같이 클래스 룰셋 안에 속성들을 작성합니다.

그리고 나서 아래와 같이 위 세트를 사용할 선택자 위치에 작성하면 됩니다.

컴파일된 css

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

믹스인 더 알아보기 #1

파라미터 믹스인 #2 

Nested Rules(중첩 규칙)

LESS 는 CSS 케스케이딩 작성 방식 대신에 중첩 또는 조합하여 사용할 수 있는 능력을 부여합니다.

다음과 같은 일반적인 CSS 가 있다고 가정해 봅니다.

컴파일된 css

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

위에 작성된 방식을 LESS 에서는 다음과 같은 방법으로 작성할 수 있습니다.

less

h1 {
	.mixin2(2px 3px 3 3 33 3;)
}
#header {
	color: black;
	.navigation {
		font-size: 12px;
	}
	.logo {
		width: 300px;
	}
}

위와 같이 작성하면 다음과 같이 CSS로 컴파일됩니다.

컴파일된 css

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

LESS 작성 방식은 좀 더 간결하고 HTML 과 같은 구조를 흉내냅니다.

또한 사용자는 믹스인 방법을 이용하여 가상 선택자를 묶을 수도 있습니다.

아래에 고전적인 clearfix를 믹스인 방법으로 작성해 보겠습니다.(& 기호는 바로 위인 현재 선택자의 부모 선택자를 가리킵니다)

less

.clearfix {
  display: block;
  zoom: 1;

  &:after { // &은 이 코드에서는 바로 위의 상위 선택자인 부모 선택자를 가리키고 있다
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

컴파일된 css

.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 는 그들 지시문 바디에 복사됩니다. 다음과 같이 :

less

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

컴파일된 css

@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에 대한 비조건부 지시문들도 역시 버블링됩니다.

less

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

컴파일된 css

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

Operations(연산자)

산술 연산자인 +, -, *, /는 숫자, 색상이나 변수를 조작 할 수 있습니다.

변환이 불가능하거나 무의미한 것의 units은 무시될 것입니다.

less

// 숫자들은 동일한 단위로 변환된다.
@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는 단위를 연산하는 경우에는 단위를 인식해서 결과에 반영합니다.

less

@var: 1px + 5; // 6px 반환
@width: (@var + 5) * 2;

.operation {
	width: @width;
	border: (@width * 2) solid black;
}

컴파일된 css

.operation {
  width: 22px;
  border: 44px solid black;
}

Escaping(빠져나오기)

이스케이프는 속성 또는 변수의 값으로 임의의 문자열을 사용할 수 있습니다.

~"anything" 또는 ~'anything' 내부에 보간법(interpolation)을 제외하고 사용할 수 있습니다.(보간법은 추후에...)

가끔씩은 유효하지 않은 CSS 문법을 사용한다거나 LESS에서 인식하지 못하는 고유의 문법을 사용하여 CSS 값을 출력해야 할 경우가 발생할 수 있습니다.

LESS 가 인식하지 못하는 문법이라면 에러가 발생하여 컴파일이 되지 않기 때문에 이를 이스케이핑 처리하는 것입니다.

그런 값들을 나타내려면 ~ 기호를 앞에 붙여줍니다.

다음의 예를 살펴봅니다.

less

.ms-filter {
	filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

컴파일된 css

.ms-filter {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

Functions(함수)

LESS 는 색상을 변환하고 문자열을 조작하고 수학을 할 수 있는 다양한 함수를 제공하고 있습니다.

이러한 함수들은 함수 레퍼런스에 문서화되어 있습니다.

함수를 사용하는 것은 꽤 간단합니다.

다음의 예는 0.5를 50%로 변환하고 5% 기본 색상의 채도를 증가시키고 25%를 밝게하며 8도 회전시켜서 배경색을 설정합니다.

less

.functions {
	width: percentage(@width); // `50%` 반환
	color: saturate(@base, 5%);
	background-color: spin(lighten(@base, 25%), 8);
}

컴파일된 css

.functions {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

Namespaces and Accessors(네임스페이스와 접근자)

CSS @namespace 또는 네임 스페이스의 선택자와 혼동하지 마시기 바랍니다.

가끔은 팀(의 목적)을 위해, 또는 몇몇 캡슐화된 소스를 제공하기 위해, 변수나 믹스인을 그룹으로 묶고 싶을 수 있습니다. 

LESS 에서는 매우 직관적인 방법으로 변수나 믹스인을 그룹으로 묶을 수 있습니다. 

- 나중에 재사용을 하거나, 배포하기 위해서, 그룹으로 묶고 싶은 몇몇 믹스인과 변수들을 #bundle 안에 넣으세요.

.button클래스(믹스인)을 #header a 안에서 믹스인하려면, 다음과 같이 하면 됩니다:

less

#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;
}

컴파일된 css

#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의 스코프는 일반 프로그래밍 언어와 매우 비슷합니다.

변수와 믹스인은 먼저 지역 스코프에서 찾고, 변수나 믹스인을 찾을 수 없는 경우에 컴파일러는 부모 범위에서 찾을 것입니다.

less

// 전역 스코프
@var: red;

#page {
    // 지역 스코프
	@var: white;
	#header {
		color: @var; // white (지역 스코프에서 먼저 찾는다)
	}
}

컴파일된 css

#page #header {
  color: white;
}

만약 지역스코프 내에 변수가 없다면 전역 스코프를 검색한다. 다음과 같이 :

less

@var: red;

#page {
	#header {
		color: @var; // red (지역 스코프에 없기 때문에 전역 스코프를 검색하여 찾는다)
	}
}

컴파일된 css

#page #header {
  color: red;
}

Comments(주석)

LESS의 주석은 자바스크립트 주석과 같습니다.

대신에 CSS에서 사용하는 /* ... */ 주석은 컴파일되어 CSS에 유지되지만 // 주석은 CSS에 출력되지 않습니다.

less

/*  CSS-스타일 주석이고 CSS 에 유지됩니다. */
// 한줄짜리 주석으로 CSS 에서는 보이지 않습니다.
.comments { color: red }

컴파일된 css

/*  CSS-스타일 주석이고 CSS 에 유지됩니다. */
.comments {
  color: red;
}

Importing(파일 불러오기)

메인 .less 파일 안에서 다른 .less 파일들과, 모든 변수들, 믹스인들을 불러들여 사용할 수 있습니다. .less 확장자는 선택사항이라서 아래 두 가지 형태 모두 사용 가능합니다:

less

@import "lib.less";
@import "lib";

만약에 LESS가 처리하지 않고 CSS 파일 자체를 불러오고 싶다면, 그냥 .css 확장자를 사용하시기 바랍니다.

less

@import "lib.css";

이렇게 불러들이면 CSS 파일을 아무 변환 없이 그대로 불러들여 보여주게 됩니다.

Jaehee's WebClub