Stylus → CSS 변환기 — 무료 온라인

Stylus 입력

변환된 CSS

Stylus → CSS 예제

Stylus 변수와 중첩이 일반 CSS로 컴파일됩니다. 예제:

변수와 중첩 선택자

Stylus 입력:

입력

컴파일된 CSS:

출력

위의 예제를 사용하여 더 많은 샘플 데이터를 불러오세요.

Stylus → CSS란?

변수, 중첩된 선택자, 그 깔끔한 최소 구문을 가진 .styl 파일이 있는데 브라우저는 일반 CSS만 이해합니다. 이 도구가 그 간극을 메웁니다. Stylus는 유연한 구문으로 알려진 CSS 전처리기로 중괄호, 세미콜론, 콜론이 모두 선택 사항입니다. Sass/SCSS와 Less처럼 브라우저가 사용하기 전에 컴파일이 필요합니다. 전체 프로젝트에서는 공식 Stylus npm 패키지를 사용하지만 빠른 확인이나 스니펫에는 과도합니다. 이 도구는 JavaScript를 사용하여 브라우저에서 완전히 변환을 실행합니다. 출력은 W3C CSS 명세를 따릅니다.

Stylus를 붙여넣거나 .styl 파일을 업로드하세요. 이 도구는 변수, 중첩, & 부모 선택자를 처리합니다. 브라우저에서 완전히 실행됩니다. SCSS나 Less는 SCSS → CSS 또는 Less → CSS를 사용하세요. 출력 포맷에는 CSS 포매터를 사용하세요.

이 도구 사용 방법

Stylus 붙여넣기 또는 업로드

Stylus 코드를 왼쪽 편집기에 붙여넣거나 업로드를 클릭하여 .styl 파일을 불러오세요. 예제로 변수와 중첩이 포함된 샘플 Stylus를 불러올 수 있습니다.

CSS 출력 확인

오른쪽 패널에 컴파일된 CSS가 표시됩니다. 복잡한 Stylus(믹스인, 함수, 임포트)는 공식 Stylus 컴파일러가 필요할 수 있습니다. 유효성 검사는 CSS 검증기를 사용하세요.

복사 또는 다운로드

복사 또는 다운로드로 CSS를 저장하세요. 소기화에는 CSS 소기화를 사용하세요. CSS를 SCSS나 Less로 변환하려면 CSS → SCSS 또는 CSS → Less를 사용하세요.

Stylus 변환이 도움이 되는 곳

Stylus는 Vite, Webpack, Gulp로 구축된 프로젝트에서 사용됩니다. 전체 빌드 없이 스니펫을 컴파일하거나 Stylus가 생성하는 내용을 확인할 때 이 도구가 도움이 됩니다. 빌드 파이프라인은 일반적으로 공식 Stylus 패키지를 사용합니다.

다른 전처리기에는 SCSS → CSS 또는 Less → CSS를 사용하세요. CSS 파일 결합에는 CSS 결합기를 사용하세요. HTML에서 CSS를 추출하려면 CSS 추출기를 사용하세요.

자주 묻는 질문

설치 없이 Stylus를 CSS로 변환하는 방법은?

Stylus 코드를 이 도구에 붙여넣으면 CSS가 즉시 나타납니다. 모든 것이 JavaScript로 브라우저에서 실행됩니다 — npm, Node.js, 빌드 단계 불필요. 코드는 기기를 벗어나지 않습니다.

이 도구는 Stylus 변수와 중첩을 지원하나요?

네. 변수(예: $primary = #007bff), 중첩된 선택자, & 부모 선택자 모두 지원됩니다. 믹스인, 함수, @import 등 고급 기능은 공식 Stylus 컴파일러가 필요합니다.

Stylus, SCSS, Less의 차이는 무엇인가요?

세 가지 모두 CSS 전처리기입니다. Stylus는 가장 유연한 구문을 가집니다 — 중괄호, 세미콜론, 콜론이 모두 선택 사항입니다. SCSS는 CSS 상위 집합입니다. Less는 JavaScript 기반으로 SCSS와 유사합니다.

darken() 같은 함수가 작동하지 않는 이유는?

darken(), lighten() 같은 Stylus 내장 함수는 완전한 Stylus 런타임이 필요합니다. 이 도구는 정적 변환만 지원합니다. 완전한 함수 지원을 위해 npm으로 Stylus를 설치하세요.

Stylus 코드가 서버로 전송되나요?

아니요. 모든 변환은 브라우저에서 완전히 실행됩니다. Stylus 코드는 기기를 벗어나지 않습니다 — 백엔드 없음, 로그 없음.