Stylus → CSS 변환기

Stylus 입력

변환된 CSS

Stylus → CSS 예제

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

변수와 중첩 선택자

Stylus 입력:

입력

컴파일된 CSS:

출력

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

Stylus → CSS란?

Stylus는 선택적 중괄호, 변수, 믹스인, 중첩을 지원하는 CSS 전처리기입니다. Sass와 Less처럼 브라우저용 표준 CSS로 컴파일됩니다. 이 도구는 브라우저에서 Stylus를 CSS로 변환합니다—빌드 단계가 필요 없습니다. 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 기능을 지원하나요?

이 도구는 변수, 중첩, & 부모 선택자를 지원합니다. 믹스인, 함수, @import 및 기타 고급 기능은 공식 컴파일러가 필요할 수 있습니다.

Stylus vs SCSS vs Less?

모두 CSS 전처리기입니다. Stylus는 최소 구문(선택적 중괄호/세미콜론)을 가집니다. SCSS는 CSS 호환입니다. Less는 SCSS와 유사합니다. 스택에 맞는 것을 사용하세요.

darken(), lighten()은요?

darken()과 같은 Stylus 내장 함수는 이 기본 변환기에서 평가되지 않습니다. 완전한 지원을 위해서는 빌드에서 공식 Stylus 컴파일러를 사용하세요.

CSS를 Stylus로 변환할 수 있나요?

이 도구는 Stylus를 CSS로만 변환합니다. CSS를 다른 전처리기로 변환하려면 CSS → SCSS 또는 CSS → Less를 사용하세요.