LESS 기법(네스기법, Mixin, escape, scope)

LESS 내포 규칙(Nested Rules)

중복되는 부모 태그, 클래스를 생략해주는 기법

=> CSS 전체 구조도를 파악하는 데도 도움이 된다.

 

기존 CSS	LESS
div {     width: 500px;     color : #000000; } div h3{     width: 500px;     color : #f96d9c; } div h3 a {     color : #000000; } div h1{     width : 300px;     color : #ff0000; }	@color-black : #000000; @color-pink : #f96d9c; @color-red : #ff0000; @width-default : 500px; div {     width : @width-default;     color : @color-black;     h3 {         width : @width-default;         color : @color-pink;         a {             color : @color-black;         }     }     h1 {         width : 300px;         color : @color-red;     }     }

 

LESS Mixin

미리 정의한 코드를 CSS에 포함시키는 기능이다.

자바스크립트의 함수와 비슷하다고 보면 된다.

파라미터를 전달해서 속성 상태값을 변경할 수도 있다.

  cf) SCSS는 @mixin과 @include 키워드를 이용해서 믹스인을 사용

기존 CSS	LESS
h3 {   padding-top: 5px;   padding-bottom: 5px;   padding-right: 5px;   padding-left: 5px;   background-color: #ffffff; } h2 {   padding-top: 10px;   padding-bottom: 10px;   padding-right: 10px;   padding-left: 10px;   background-color: #000000; }	.mixinEx (@pad:5px, @color-bg :#ffffff){     padding-top: @pad;     padding-bottom : @pad;     padding-right : @pad;     padding-left : @pad;     background-color : @color-bg; } h3 {     .mixinEx; } h2 {     .mixinEx(10px,#000000); }

 

LESS Escape

LESS에서 제공하는 기능으로, .less 파일에 LESS 문법에 맞지 않는 코드가 포함되어 있을 경우 해당 코드를 문자열로 묶고 문자열 앞에 ~ 기호를 붙여 해석하지 않도록 만드는 방법이다.

 

LESS 예제	컴파일 이후 변경된 상태
.class {     width : ~"calc(100% - 200px)"; }	.class {     width: calc(100% - 200px); }

 

LESS Scope(유효범위)

LESS에서 변수는 가장 먼저

1) 해당 선택자 안에서 변수 선언을 찾아보고

2) 없으면 => 부모 선택자에서 변수 선언을 찾아보고

3) 없으면 => 전역에서 변수 선언을 찾아 값을 적용한다.

 

	컴파일 한 후 결과값
@color-default : black; #header {     @color-default : red;     h3 {         color : @color-default; // red     } } #body {     color : @color-default; // black   }	#header h3 {   color: #ff0000; //red } #body {   color: #000000; // black }

 

 

참고사이트

goohwang.tistory.com/5