SCSS를 CSS로 변환기
SCSS/SASS를 CSS로 무료 온라인 변환기, 설치 불필요. SCSS/SASS를 CSS 형식으로 컴파일합니다.
SCSS to CSS 소개
들여쓰기 기반의 규칙 블록을 파싱하여 SCSS 중첩을 일반 CSS로 평면화합니다. 중첩된 선택자를 부모 선택자와 결합하고(& 부모 참조 단축 표기를 존중), 각 규칙을 속성과 함께 출력하며, 줄 주석이나 $variable 선언 같은 SCSS 전용 기능은 제거합니다.
사용 방법
1. 입력 상자에 SCSS를 붙여넣습니다. 2. Convert를 클릭하여 출력 상자에 CSS를 렌더링합니다. 3. Copy를 사용해 결과를 복사합니다. 입력이 비어 있으면 오류 메시지가 표시됩니다.
중첩과 변수
중첩된 선택자는 부모 선택자와 공백으로 결합됩니다(예: .parent .child). &로 시작하는 자식 선택자(&:hover 같은 의사 클래스 포함)는 공백 없이 부모에 직접 연결됩니다. SCSS의 $variable 선언은 /* $variable removed */ 주석으로 대체되고, 남아 있는 $name 사용은 var(--variable)로 다시 작성됩니다. 따라서 완전한 변수 해석을 수행하지 않아도 출력은 유효한 CSS가 됩니다.
▶파서는 어떻게 중첩 깊이를 감지하나요?
각 줄의 선행 공백을 측정하고 열려 있는 규칙의 스택을 유지합니다. 이전 규칙보다 들여쓰기가 더 깊은 줄은 그 규칙의 자식이 되고, 같거나 더 얕은 들여쓰기의 줄은 스택을 일치하는 부모까지 되돌립니다.
▶SCSS 변수는 어떻게 처리되나요?
$var: value; 선언은 제거되어 주석으로 대체되고, 남아 있는 $var 참조는 var(--variable)로 다시 작성됩니다. 이 도구는 원래 값을 대체하지 않으므로, 완전한 변수 해석이 필요하면 Dart Sass 컴파일러를 대신 사용하세요.
▶@include, @mixin, @extend를 지원하나요?
아니요. 변환기는 중첩된 선택자와 기본 속성만 처리합니다. Mixin, extend, 함수, @use/@import는 확장되지 않으며 실제 Sass 컴파일러로 처리해야 합니다.
▶인라인 주석은 보존되나요?
아니요. //로 시작하는 줄은 일반 CSS에서 유효하지 않기 때문에 파싱 중에 삭제됩니다. 출력에는 표준 /* ... */ 블록 주석만 남게 됩니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.