SCSS → CSS 변환기
SCSS/SASS 코드를 CSS로 변환
SCSS 입력
컴파일된 CSS
SCSS → CSS 예제
SCSS 변수와 중첩이 일반 CSS로 컴파일됩니다. 예제:
변수와 중첩 선택자
SCSS 입력:
컴파일된 CSS:
위의 샘플을 사용하여 더 많은 예제 데이터를 불러오세요.
SCSS → CSS란?
SCSS(Sassy CSS)는 변수, 중첩, 믹스인 등을 추가하는 CSS 전처리기입니다. 브라우저는 SCSS를 실행하지 않으며—일반 CSS가 필요합니다. 이 도구는 SCSS(또는 SASS)를 브라우저에서 사용할 수 있는 CSS로 컴파일합니다. Sass 문서가 구문을 정의합니다.
컴파일은 브라우저에서 완전히 실행됩니다. 서버에 아무것도 전송되지 않습니다. 출력은 표준 CSS입니다. 반대 방향(CSS를 SCSS로)에는 CSS → SCSS를 사용하세요. Less에는 Less → CSS를 사용하세요.
이 도구 사용 방법
SCSS 붙여넣기 또는 업로드
SCSS나 SASS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .scss 또는 .sass 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다. 잘못된 SCSS는 오류를 표시합니다.
컴파일된 CSS 확인
오른쪽 패널에 컴파일된 CSS가 표시됩니다. 변수가 해결되고, 중첩이 평탄화되며, 믹스인이 확장됩니다. 출력은 모든 브라우저에서 사용할 수 있는 일반 CSS입니다.
SCSS → CSS가 도움이 되는 경우
프로젝트, 디자인 시스템 또는 레거시 코드베이스에서 SCSS가 있지만 일반 CSS가 필요한 경우—빠른 테스트, 이메일 템플릿 또는 빌드 도구를 지원하지 않는 시스템—이 컴파일이 도움이 됩니다. Bootstrap과 Foundation 같은 프레임워크는 SCSS를 사용합니다. 프로덕션 빌드에는 Dart Sass와 webpack이 SCSS를 컴파일합니다. 디버깅에도 유용합니다: SCSS가 생성하는 CSS를 정확히 확인할 수 있습니다.
많은 프레임워크(Bootstrap, Foundation)가 SCSS를 사용합니다. 변수를 커스터마이즈하거나 스타일을 추출하는 경우, 여기서 컴파일하면 최종 CSS를 얻을 수 있습니다. 기존 CSS를 SCSS 구조로 변환하려면 CSS → SCSS를 사용하세요.
자주 묻는 질문
SCSS와 SASS의 차이점은?
SCSS는 CSS처럼 중괄호를 사용합니다. SASS는 들여쓰기를 사용합니다(중괄호 없음). 둘 다 동일한 CSS로 컴파일됩니다. 이 도구는 두 구문을 모두 지원합니다.
@import를 지원하나요?
파일이 업로드되지 않은 경우 부분 임포트가 해결되지 않을 수 있습니다. 다중 파일 프로젝트에는 Dart Sass나 번들러 같은 빌드 도구를 사용하세요. Sass CLI를 참조하세요.
내 데이터는 안전한가요?
네. 컴파일은 브라우저에서 완전히 실행됩니다. 데이터가 서버에 전송되지 않습니다.
믹스인과 함수는 어떻게 되나요?
믹스인과 함수는 컴파일 중에 확장됩니다. 출력 CSS에는 해결된 값이 포함됩니다. 복잡한 함수는 컴파일러의 기능 범위 내에서 지원됩니다.
Bootstrap과 함께 사용할 수 있나요?
Bootstrap의 SCSS에는 많은 부분 파일과 변수가 있습니다. 전체 Bootstrap 컴파일에는 공식 빌드나 npm을 사용하세요. 이 도구는 단일 파일 SCSS나 스니펫에 작동합니다.
관련 도구
Sass/SCSS: sass-lang.com 및 Sass 문서. MDN CSS 및 W3C CSS가 출력 형식을 정의합니다.