[Less] Less 기본

CSS의 아쉬운 점

1. variable을 사용할 수 없다.
2. 이미 선언된 클래스를 재사용(mixin) 할 수 없다.
3. 중첩된 룰 처리
4. operation 처리

Less

css의 아쉬운 점을 보완. 그러나 브라우저에서 인식할 수 없다.
프로그래밍을 하듯이 css 작업을 할 수 있다.

기본 문법

변수
@를 붙여 선언한다.

@base_width: 300px;

mixin
선언되어 있는 클래스를 재사용 하는 것

.sub_content {
    
}

.section1 {
    .sub_content;
}

중첩된 룰 처리
같은 클래스의 하위 요소들을 따로 따로 처리할 필요 없이 같이 처리 가능

/* css */

.content {

}

.content li {

}

.content span {

}

/* less */

.content {
    
    li {
    
    }
    span {
    
    }
}

operation
연산을 할 수 있다.

@base_width: 300px;

.left {
    width: @base_width/3;
}

Less 컴파일 하는 법

1. npm으로 설치한다.
   npm install less

2. lessc 'less파일' 'css파일이름'명령어를 입력하면 less파일을 css파일로 변환해준다.
   lessc main.less main.css

Tip) gulp 같은 것을 사용하면 less 파일을 실시간으로 css파일로 변결할 수 있다.