CSS 고급 - LESS 언어(language), syntax, compile

< CSS 고급 - LESS 언어(language), syntax, compile >

1. LESS 기초, 문법(syntax)

 - css 의 부족한 부분 : varibles, mixins, 중첩된 룰처리, operation

 - css 의 부족한 부분을 보완하기 위하여 나온 언어: LESS (@변수 선언이 핵심, less 확장자)

 - @변수 선언에 의한 중복제거, 속성값 재사용, 컨텐츠 속성값 전체 재활용, 속성값 사이에 선택자 추가 등

   @base_width : 300px (변수 선언)

   @base_height : 200px

   @gray_border : 1px solid gray;

   .wrap {

width: @base_width; (변수 사용으로 중복 제거)

height: @base_height;

border: @gray_border;

}

   .content {

width: @base_width; (변수 사용으로 중복 제거)

height: @base_height;

border: @gray_border;

margin: 5px

}

   .footer {

.content (속성값 전체 재활용, Mixin)

color: red

margin: 15px (동일 속성값 override 가능)

}

   .content2 {

width: @base_width; (변수 사용으로 중복 제거)

height: @base_height/2; (속성값 변수를 이용해서 수식 계산도 가능)

li { (속성들 사이에 선택자를 중첩 추가 가능)

list-style: none;

a { color: blue;}

}

}

2. LESS compile

 - less 관련 사이트 : http://lesscss.org

 - 브라우져에서 less를 해석할 수 없기 때문에 less 를 css 로 compile해서 적용해야 함. ( LESS =  CSS preprocessor )

 - less를 npm 기반으로 설치

 : https://github.com/less --> less.js --> 명령어 sudo npm install less -g less

(node.js 가 설치가 되어있어야 less 가 작동함.)

lessc main.less main.css (동일 폴더내에서 변환된 css 파일이 생성됨.)