01
1. LESS란 무엇인가
LESS(Leaner Style Sheets)는 CSS를 확장한 전처리기 언어로, 변수·중첩·믹스인·연산 같은 프로그래밍 기능을 CSS에 더해 줍니다. 브라우저는 순수 CSS만 이해하므로 배포 전에 LESS를 CSS로 컴파일해야 합니다. 이 도구는 공식 less.js 엔진을 브라우저에서 실행해 그 변환을 즉시 수행합니다.
🎨 LESS to CSS 컴파일러
LESS 코드를 붙여넣으면 공식 less.js 엔진으로 즉시 CSS로 컴파일합니다. 변수(@var), 중첩(nesting), 믹스인(mixin), 연산, 내장 함수를 모두 지원합니다.
🔒 컴파일은 브라우저 안에서만 수행되며, 입력한 코드는 서버로 전송되지 않습니다. less.js 번들도 CDN이 아닌 이 사이트에서 직접 제공합니다.
다른 개발자 도구
자세히 알아보기
02
2. 주요 기능
변수(@brand: #4A90D9;)로 색상·크기를 한 곳에서 관리하고, 선택자를 중첩(nesting)해 구조를 그대로 표현할 수 있습니다. 믹스인(.rounded(6px))으로 재사용 가능한 스타일 블록을 만들고, (@pad * 2) 같은 산술 연산과 darken()·lighten() 같은 내장 색상 함수도 사용할 수 있습니다.
03
3. 브라우저 컴파일과 보안
이 도구는 입력을 서버로 보내지 않고 브라우저 안에서만 컴파일합니다. 보안을 위해 LESS의 인라인 자바스크립트 실행 기능(백틱 문법)은 비활성화되어 있어, eval 없이 안전하게 동작합니다. 대규모 프로젝트에서는 빌드 파이프라인(webpack, Vite, lessc 등)에 통합하는 것을 권장합니다.
자주 묻는 질문
입력한 LESS 코드가 서버로 전송되나요?
아니요. 컴파일은 브라우저 자바스크립트 안에서만 수행되며 코드는 서버로 전송되지 않습니다.
@import로 외부 파일을 불러올 수 있나요?
브라우저 환경에서는 외부 파일 접근이 제한되어 원격 @import는 실패할 수 있습니다. 단일 파일 스니펫 변환에 적합합니다.
LESS의 인라인 자바스크립트(백틱)를 쓸 수 있나요?
아니요. 보안을 위해 자바스크립트 실행 기능은 꺼져 있습니다. 변수·믹스인·연산 등 표준 기능은 모두 사용할 수 있습니다.
SCSS/Sass도 컴파일되나요?
아니요, 이 도구는 LESS 전용입니다. LESS와 SCSS는 문법이 다릅니다.