CSS를 Less로 리팩토링하기

Jan 6, 2016 • css

LESS는 어떻게 쓰는거지..

사실 자바스크립트 트랜스파일러나 CSS컴파일러, js모듈라이브러리에는 대단히 회의적인 입장이었습니다만,
어느새 정신을 차려보니 저러한 도구들을 사용, 혹은 이해하지 않고서는 지금 쏟아져나오는 기술들을 쫓아가지도 못할 지경에 이르렀습니다. 제 목표는 7살짜리 조카에게 프로그래밍을 가르쳐주는 것이었는데..
정신을 차려보니, 정작 제가 몇년이나 더 개발을 할 수 있을지 불투명한 상황이 되어 있더군요.
잠시 휴식기간을 가지는 동안 미루어두었던 프론트엔드 개발 툴을 학습해보기로 했고,
그 성과로 이번 포스트에는 그간 학습했던 LESS를 정리할 수 있게 되었습니다.

다음의 CSS를 LESS로 바꾸어 봅니다. 렌더링 결과물은 이곳에서 확인하세요.
LESS 컴파일러는 Webstorm과 연결하면 보다 쉽게 사용할 수 있습니다.

div.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
}

div.content {
    width: 1200px;
    margin: 0 auto;
}

div.content div.box {
    width: 400px;
    height: 200px;
    float: left;
    line-height: 200px;
    text-align: center;
}

div.content div.box:nth-child(1) {
    background-color: rgba(255, 0, 255, 0.5);
}

div.content div.box:nth-child(2) {
    background-color: rgba(0, 255, 0, 0.5);
}

div.content div.box:nth-child(3) {
    background-color: rgba(255, 255, 0, 0.5);
}

1.그룹화 하기
포함관계에 있는 블럭들을 scope에 가두어 둘 수 있습니다.
전 개인적으로 이 부분이 너무나도 마음에 듭니다. ^^

div.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
}

div.content {
    width: 1200px;
    margin: 0 auto;
    
    div.box {
        width: 400px;
        height: 200px;
        float: left;
        line-height: 200px;
        text-align: center;
    }
    
    div.box:nth-child(1) {
        background-color: rgba(255, 0, 255, 0.5);
    }
    
    div.box:nth-child(2) {
        background-color: rgba(0, 255, 0, 0.5);
    }
    
    div.box:nth-child(3) {
        background-color: rgba(255, 255, 0, 0.5);
    }
}

2.자기 참조하기
&으로 엘리먼트 스스로를 가리키게 해서 psudo셀렉터를 간단하게 만들 수 있습니다.

div.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
}

div.content {
    width: 1200px;
    margin: 0 auto;

    div.box {
        width: 400px;
        height: 200px;
        float: left;
        line-height: 200px;
        text-align: center;

        &:nth-child(1) {
            background-color: rgba(255, 0, 255, 0.5);
        }

        &:nth-child(2) {
            background-color: rgba(0, 255, 0, 0.5);
        }

        &:nth-child(3) {
            background-color: rgba(255, 255, 0, 0.5);
        }
    }
}

3.믹스인 만들기
믹스인은 일종의 함수입니다. 중복되는 코드 블럭을 반복해서 출력할 수도 있습니다.
인자도 받을수 있고, 재귀호출도 됩니다!

.textAlignCenter(@lineHeight: 100){
    line-height: @lineHeight;
    text-align: center;
}

div.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    .textAlignCenter(100px);
    background-color: rgba(255, 0, 0, 0.5);
}

div.content {
    width: 1200px;
    margin: 0 auto;

    div.box {
        width: 400px;
        height: 200px;
        float: left;
        .textAlignCenter(200px);

        &:nth-child(1) {
            background-color: rgba(255, 0, 255, 0.5);
        }

        &:nth-child(2) {
            background-color: rgba(0, 255, 0, 0.5);
        }

        &:nth-child(3) {
            background-color: rgba(255, 255, 0, 0.5);
        }
    }
}

4.내장 믹스인 사용하기
유틸리티 함수를 지원합니다.

.textAlignCenter(@lineHeight: 100){
    line-height: @lineHeight;
    text-align: center;
}

div.header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    .textAlignCenter(100px);
    background-color:fade(red, 50);
}

div.content {
    width: 1200px;
    margin: 0 auto;

    div.box {
        width: 400px;
        height: 200px;
        float: left;
        .textAlignCenter(200px);

        &:nth-child(1) {
            background-color:fade(purple, 50);
        }

        &:nth-child(2) {
            background-color:fade(green, 50);
        }

        &:nth-child(3) {
            background-color:fade(yellow, 50);
        }
    }
}

5.변수 사용하기
정말로 원했던 기능이었습니다…
실수가 많이 줄어들겠네요!

.textAlignCenter(@lineHeight: 100){
    line-height: @lineHeight;
    text-align: center;
}

div.header {
    @height: 100px;
    width: 1200px;
    height: @height;
    margin: 0 auto;
    .textAlignCenter(@height);
    background-color:fade(red, 50);
}

div.content {
    width: 1200px;
    margin: 0 auto;

    div.box {
        @height: 200px;
        width: 400px;
        height: @height;
        float: left;
        .textAlignCenter(@height);

        &:nth-child(1) {
            background-color:fade(purple, 50);
        }

        &:nth-child(2) {
            background-color:fade(green, 50);
        }

        &:nth-child(3) {
            background-color:fade(yellow, 50);
        }
    }
}

이 외에도 많은 기능이 있었지만, 소규모 코드에서는 이 정도의 기능으로도 충분히 간결한 코드를 만들어 낼 수 있었습니다.
외주SI시장에서 사용할 수 없는 기술은 되도록 머리에 담지 않으려 했건만..
기술 발전을 고집으로 대응하려는 것이 가장 바보짓이었네요.