Less를 표준 CSS로 변환 — Numio
브라우저에서 Less를 CSS로 컴파일합니다. 변수, 중첩, mixin, 연산을 공식 less.js 컴파일러가 일반 CSS로 펼쳐 주므로 lessc를 설치하지 않고도 출력을 확인할 수 있습니다.
Less 변수, 중첩, mixin이 만들어 내는 CSS를 확인할 때.
Less
CSS
이럴 때 사용하세요
- Less 변수, 중첩, mixin이 만들어 내는 CSS를 확인할 때.
- 일반 CSS를 쓰는 프로젝트를 위해 작은 Less 파일을 변환할 때.
사용 방법
- Less 코드를 붙여 넣거나 .less 파일을 엽니다.
- 대상 브라우저에 맞게 벤더 접두사 설정을 선택합니다.
- 생성된 CSS를 확인한 뒤 복사합니다.
Less 입력
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS 출력
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}세부 정보 및 제한 사항
정의되지 않은 변수나 닫히지 않은 괄호가 있으면 컴파일이 중단됩니다. 오류를 추적할 때는 짧은 스니펫부터 시작하세요.
컴파일은 브라우저에서 실행됩니다. 외부 URL을 @import하면 브라우저가 해당 리소스를 요청할 수 있으므로 독립적인 코드를 쓰는 것이 좋습니다.
다른 로컬 파일 가져오기, Less 플러그인, 프로젝트별 컴파일러 옵션은 사용할 수 없습니다. 벤더 접두사는 대상 브라우저 설정에 따라 달라집니다.
FAQ
lessc로 컴파일하는 것과 같은가요?
lessc가 실행하는 것과 같은 컴파일러인 less.js를 사용하므로, 독립적인 파일은 기본 옵션에서 같은 CSS로 컴파일됩니다. 로컬 가져오기나 플러그인 같은 프로젝트 기능은 여기서 사용할 수 없습니다.
@import를 쓰는 파일도 컴파일할 수 있나요?
내 컴퓨터의 다른 파일을 가리키는 import는 브라우저에서 해석할 수 없습니다. 가져오는 코드를 직접 붙여 넣거나 lessc로 프로젝트 전체를 컴파일하세요.
Less와 CSS의 차이는 무엇인가요?
Less는 CSS 전처리기입니다. 변수, 중첩, mixin, 함수를 추가하며, 브라우저에서 쓰려면 먼저 CSS로 컴파일해야 합니다.