Less CSS 프리프로세서 사용법

반응형 디자인 학습 후 CSS 프리프로세서를 알아보겠습니다.

1. 기본 개념

1.1 CSS 프리프로세서의 필요성

CSS( Cascading Style Sheet )는 선언형 언어로, 복잡한 스타일 시트 작성 시 반복적인 선택자 작성과 재사용 불가능한 속성 값으로 인해 개발자가 어려움을 겪습니다. 이러한 문제를 해결하기 위해 CSS 프리프로세서가 등장했습니다.

복잡한 중첩 구문 부재로 모듈화 어려움
변수와 재사용 메커니즘 부족으로 유지보수성 저하

1.2 프리프로세서 정의

프리프로세서는 전용 프로그래밍 언어로 스타일 시트를 작성한 뒤 일반 CSS 파일로 컴파일하는 기술입니다. 이는 브라우저 호환성에 신경 쓰지 않고 프로그래밍 특성을 추가합니다.

1.3 주요 프리프로세서

Sass: 2007년 출시, Ruby 기반으로 조건문과 반복문 지원, SCSS 포맷으로 진화
Less: 2009년 출시, JS 기반으로 간결한 문법, Twitter Bootstrap 사용
Stylus: Node.js 커뮤니티 기반, Vue 프로젝트에서 사용

1.4 특징 비교

Sass/Scss: 엄격한 문법, 조건/반복 지원
Less: CSS와 유사한 문법, 간단한 로직 연산
Stylus: 자유로운 문법, 프로그래밍 언어처럼 사용

1.5 공식 사이트

중국어: http://lesscss.cn/
영문: http://lesscss.org
소스코드: https://github.com/cloudhead/less.js

2. 사용 방법

2.1 설치 방법

직접 참조 (비추천)

.less 확장자 파일 생성
HTML에 <link> 태그로 연결
CDN 스크립트 추가

<link rel="stylesheet/less" type="text/less" href="style.less" />
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.0/less.js"></script>

NPM 설치 (비추천)
VSCode 확장 (추천)

Easy LESS 확장 설치
.less 파일 저장 시 자동 컴파일

2.2 사용 예시

JS 방식

body {
  background-color: red;
}

<html>
  <head>
    <link rel="stylesheet" href="style.less" type="text/less">
    <style type="text/less">
      #box {
        width: 100px;
        .inner {
          background: green;
        }
      }
    </style>
  </head>
  <body>
    <div id="box"><div class="inner"></div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.0/less.js"></script>
  </body>
</html>

VSCode 방식

body {
  background: aquamarine;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

2.3 주석

단일 주석은 컴파일 시 제거됨
블록 주석은 유지됨

#box {
  // 숨은 주석
  width: 200px;
  /**
   * 보이는 주석
   */
}

2.4 변수 사용

@size: 300px;
@color: aqua;

.container {
  width: @size;
  height: @size;
  background: @color;
  margin: auto;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

2.5 중첩 구문

body {
  background: red;
  .container {
    width: 1200px;
    border: 1px solid black;
    
    .header {
      height: 100px;
      background: yellow;
    }
  }
}

2.6 연산

header {
  width: 100px + 10;
  height: 20rem + 10px;
  color: red - 55;
}

2.7 믹스인

.mixin {
  font-size: 14px;
  color: #ccc;
}

.content {
  .mixin;
  padding: 10px;
}

2.8 문자열 삽입

@baseUrl: "https://example.com/";
.image {
  background: url("@{baseUrl}image.jpg");
}

2.9 파일 불러오기

@import "variables.less";
@import "styles.css"; // 주의: 마지막에 불러야 함

2.10 함수 사용

div {
  margin: if(2 > 1, 10px, 0);
  color: if(iscolor(@color), @color, black);
}

태그: CSS 프리프로세서 Less 언어 스타일 시트 최적화 변수 사용법 믹스인 기법

7월 13일 04:41에 게시됨

괴물 클럽