LESS (Leaner Style Sheets)

LESS는 CSS를 더 효율적으로 작성할 수 있게 해주는 전처리기(preprocessor)이다.

LESS는 CSS에 프로그래밍적인 기능을 추가하여, 스타일 시트를 더 유지보수하기 쉽고 재사용 가능하게 만든다.
일반 CSS로 작성된 코드를 더 구조화되고 효율적으로 관리할 수 있게 해준다.

LESS의 주요 기능과 특징

  1. 변수 사용
    LESS에서는 자주 사용하는 값을 변수로 저장하여 재사용할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    // 변수 정의
@primary-color: #4A90E2;
@padding-large: 20px;

.header {
    background-color: @primary-color;
    padding: @padding-large;
}

.button {
    color: @primary-color;
    margin: @padding-large;
}

  2. 중첩 규칙
    HTML의 구조를 반영하여 CSS 규칙을 중첩할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    .navigation {
    background: #333;

    ul {
        list-style: none;

        li {
            display: inline-block;

            a {
                color: white;

                &:hover {
                    color: #ddd;
                }
            }
        }
    }
}

  3. 믹스인(Mixins)
    재사용 가능한 스타일 그룹을 정의할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    .border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.button {
    .border-radius(3px);
    background: #007bff;
}

.card {
    .border-radius(10px);
    background: #fff;
}

  4. 연산자 사용
    수학적 연산을 직접 스타일 시트 내에서 수행할 수 있다:

    1
2
3
4
5
6
7
8

    @base-size: 16px;
@spacing: 20px;

.container {
    padding: @spacing * 2;
    font-size: @base-size + 4px;
    width: 100% - 40px;
}

  5. 함수와 색상 조작
    내장 함수를 사용하여 색상을 동적으로 조작할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    @base-color: #428bca;

.button {
    background: @base-color;
    border: 1px solid darken(@base-color, 10%);

    &:hover {
        background: lighten(@base-color, 10%);
    }
}

LESS의 실제 활용 예시

  1. 테마 시스템 구축:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    // themes.less
@theme-primary: #007bff;
@theme-secondary: #6c757d;
@theme-success: #28a745;

.button-variant(@color) {
    background-color: @color;
    border-color: darken(@color, 10%);

    &:hover {
        background-color: darken(@color, 7.5%);
        border-color: darken(@color, 15%);
    }
}

.btn-primary {
    .button-variant(@theme-primary);
}

.btn-secondary {
    .button-variant(@theme-secondary);
}

  2. 반응형 디자인 구현:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

    @breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;

.responsive-mixin(@min-width; @content) {
    @media (min-width: @min-width) {
        @content();
    }
}

.container {
    width: 100%;

    .responsive-mixin(@breakpoint-sm, {
        width: 540px;
    });

    .responsive-mixin(@breakpoint-md, {
        width: 720px;
    });
}

LESS의 장점

  1. 코드 재사용성
    변수와 믹스인을 통해 코드 중복을 줄이고 일관성을 유지할 수 있다.

  2. 유지보수 용이성
    중첩 규칙과 모듈화를 통해 코드 구조를 더 명확하게 만들 수 있다.

  3. 프로그래밍적 기능
    조건문, 반복문, 연산자 등을 사용하여 동적인 스타일 생성이 가능하다.

주의사항과 모범 사례

  1. 과도한 중첩 피하기
    너무 깊은 중첩은 컴파일된 CSS를 복잡하게 만들 수 있으므로 3-4단계 이상의 중첩은 피하는 것이 좋다.

  2. 변수 네이밍 규칙
    의미 있고 일관된 변수 이름을 사용하여 코드의 가독성을 높인다.

  3. 모듈화
    관련된 스타일을 별도의 파일로 분리하여 관리한다.

참고 및 출처