CSS 입력

변환된 SCSS

CSS → SCSS 예제

평탄한 CSS 선택자가 중첩된 SCSS로 변환됩니다. 예제:

평탄한 CSS에서의 중첩 구조

CSS 입력:

입력

변환된 SCSS:

출력

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

CSS → SCSS란?

SCSS는 CSS에 변수, 중첩, 믹스인을 추가합니다. 일반 CSS를 SCSS로 변환하면 중첩으로 재구성되고 SCSS 기능을 위한 준비가 됩니다. 이 도구는 CSS를 분석하여 SCSS 스타일 구조를 출력합니다. W3C CSS 명세가 소스를 정의하며, Sass가 출력을 정의합니다.

변환은 브라우저에서 완전히 실행됩니다. 서버에 아무것도 전송되지 않습니다. 출력은 유효한 SCSS입니다. 반대 방향(SCSS를 CSS로)에는 SCSS → CSS를 사용하세요. Less에는 CSS → Less를 사용하세요.

이 도구 사용 방법

CSS 붙여넣기 또는 업로드

CSS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .css 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다. 잘못된 CSS는 오류를 표시합니다.

SCSS 출력 검토

오른쪽 패널에 변환된 SCSS가 표시됩니다. 구조가 허용하는 경우 선택자가 중첩될 수 있습니다. 변환 후 변수와 믹스인을 수동으로 추가할 수 있습니다.

복사 또는 다운로드

복사 또는 다운로드를 사용하세요. 확인을 위해 SCSS → CSS로 SCSS를 컴파일하세요. 먼저 CSS를 포맷하려면 CSS 포매터를 사용하세요.

CSS → SCSS가 도움이 되는 경우

일반 CSS에서 SCSS로 프로젝트를 마이그레이션할 때, 또는 디자인 내보내기에서 CSS를 가지고 있고 SCSS 기반 코드베이스(예: Bootstrap 4+, Foundation)에 통합하려는 경우, 이 변환이 시작점을 제공합니다. webpack과 Vite 같은 빌드 도구는 SCSS를 컴파일합니다. 출력은 변수와 믹스인으로 개선할 수 있는 중첩 구조를 제공합니다.

Figma 같은 디자인 도구는 종종 일반 CSS를 내보냅니다. 여기서 SCSS로 변환하면 컴포넌트 기반 구조에 추가할 수 있습니다. Less를 원하면 CSS → Less를 사용하세요. 벤더 프리픽스에는 CSS 프리픽서를 사용하세요.

자주 묻는 질문

변수나 믹스인을 추가하나요?

변환기는 구조(중첩)에 집중합니다. 반복되는 값을 자동으로 변수로 추출하지 않습니다. 필요에 따라 변수와 믹스인을 수동으로 추가하세요.

내 데이터는 안전한가요?

네. 변환은 브라우저에서 완전히 실행됩니다. 서버에 데이터가 전송되지 않습니다.

중첩은 어떻게 작동하나요?

도구가 선택자 관계에서 중첩을 추론합니다. 복잡한 선택자는 평탄하게 유지될 수 있습니다. 필요에 따라 검토하고 조정하세요.

CSS → SCSS vs CSS → Less?

둘 다 전처리기 구문을 생성합니다. SCSS가 더 널리 사용됩니다(Bootstrap 4+, 많은 프레임워크). Less는 Bootstrap 3, Ant Design에서 사용됩니다. 스택에 따라 선택하세요.

출력을 컴파일할 수 있나요?

네. SCSS를 SCSS → CSS에 붙여넣어 컴파일하고 확인하세요. 출력은 원본 CSS 구조와 일치해야 합니다.

CSS → SCSS 변환기