Less → CSS 변환기
Less 코드를 브라우저 호환 CSS로 변환
Less 입력
컴파일된 CSS
Less → CSS 예제
Less 변수, 믹스인, 중첩은 일반 CSS로 컴파일됩니다. 예시:
변수, 믹스인, 중첩 선택자
Less 입력:
컴파일된 CSS:
위의 샘플을 사용하여 추가 예제 데이터를 불러오세요.
Less → CSS란?
Less는 변수, 중첩, 믹스인, 함수를 추가하는 CSS 전처리기입니다. 브라우저는 Less를 실행하지 않으며 일반 CSS가 필요합니다. 이 도구는 Less를 브라우저 호환 CSS로 컴파일합니다. Less 문서에서 문법을 확인하세요.
컴파일은 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다. 출력은 표준 CSS입니다. 반대 변환(CSS를 Less로)은 CSS를 Less로를 사용하세요. SCSS는 SCSS를 CSS로를 사용하세요.
이 도구 사용 방법
Less 붙여넣기 또는 업로드
Less를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .less 또는 .css 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다. 잘못된 Less는 오류를 표시합니다.
컴파일된 CSS 확인
오른쪽 패널에 컴파일된 CSS가 표시됩니다. 변수가 해결되고, 중첩이 평탄화되고, 믹스인이 확장됩니다. 출력은 모든 브라우저에서 사용할 수 있는 일반 CSS입니다.
Less → CSS가 도움이 되는 경우
프로젝트(예: Bootstrap 3, Ant Design) 또는 레거시 코드베이스의 Less가 있지만 일반 CSS가 필요한 경우—빠른 테스트, CDN 배포 또는 빌드 도구가 없는 시스템—이 컴파일이 도움이 됩니다. 디버깅에도 유용합니다: Less가 생성하는 CSS를 정확히 확인할 수 있습니다.
Less는 많은 오래된 프로젝트와 일부 UI 프레임워크에서 사용됩니다. 변수를 사용자 정의하거나 스타일을 추출하는 경우 여기서 컴파일하면 최종 CSS를 얻을 수 있습니다. 기존 CSS를 Less 구조로 변환하려면 CSS를 Less로를 사용하세요.
자주 묻는 질문
Less vs SCSS?
둘 다 변수, 중첩, 믹스인을 추가합니다. Less는 부모 선택자에 &를 사용하며 SCSS도 마찬가지입니다. 문법이 약간 다릅니다. 프로젝트에 맞게 선택하세요.
@import를 지원하나요?
파일이 업로드되지 않으면 가져오기가 해결되지 않을 수 있습니다. 다중 파일 프로젝트에는 공식 Less 컴파일러나 번들러를 사용하세요.
데이터는 비공개인가요?
네. 컴파일은 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다.
믹스인과 함수는 어떻게 되나요?
믹스인과 내장 함수(예: lighten(), darken())는 컴파일 중 확장됩니다. 출력 CSS에는 해결된 값이 포함됩니다.
Bootstrap 3와 함께 사용할 수 있나요?
Bootstrap 3는 Less를 사용합니다. 전체 Bootstrap 컴파일에는 공식 빌드를 사용하세요. 이 도구는 단일 파일 Less 또는 스니펫에 작동합니다.
관련 도구
Less에 대해: lesscss.org 및 Less 사용법. MDN CSS 및 W3C CSS에서 출력 형식을 정의합니다.