입력 Less

컴파일된 CSS

Less to CSS란?

브라우저가 이해하는 것은 CSS이지 Less 문법이 아닙니다. 이 변환기는 Less 코드를 표준 CSS로 변환하여 변수, 중첩, 재사용 가능한 스타일 패턴을 활용하면서도 브라우저 호환 출력을 제공할 수 있게 합니다.

빌드 파이프라인을 설정하지 않고 빠르게 컴파일하고 싶을 때 사용하세요. 모든 작업이 브라우저에서 로컬로 실행되어 코드가 비공개로 유지되며 변환은 즉시 완료됩니다.

Less to CSS 변환기 사용 방법

브라우저용 CSS로 컴파일하려면 다음 단계를 따르세요. 각 단계는 이 페이지의 실제 버튼과 패널을 사용합니다.

붙여넣기, 업로드 또는 샘플 불러오기

왼쪽 입력 Less 패널에 Less를 붙여넣거나, 업로드를 클릭하여 .less 파일을 불러오세요. 샘플을 클릭하면 변수와 믹스인을 사용한 통신 구독자 카드 스타일 예제를 확인할 수 있습니다. Less 입력 예시:

@primary: #2563eb;
@spacing: 12px;
.subscriber-card {
  padding: @spacing;
  .plan-badge { color: @primary; font-weight: 700; }
  &:hover { background: #eef2ff; }
}

컴파일된 CSS 확인

오른쪽 컴파일된 CSS 패널에 결과가 즉시 표시됩니다. 변수가 해석되고, 중첩이 평탄화되고, 믹스인이 확장됩니다.

복사 또는 다운로드

복사를 클릭하여 클립보드에 복사하거나, 다운로드를 클릭하여 .css 파일로 저장하세요. 초기화로 처음부터 다시 시작할 수 있습니다. 모든 컴파일 작업은 브라우저에서 실행됩니다.

Less to CSS 변환기