Sass to CSS 변환
Sass와 SCSS를 온라인에서 CSS로 컴파일하세요. 실시간 변환, 확장 또는 압축 출력, 오류 줄 표시, 변수·믹스인·중첩 완전 지원.
Sass와 SCSS의 차이는 무엇인가요?
SCSS는 중괄호와 세미콜론을 쓰는 CSS와 유사한 최신 문법입니다. Sass(들여쓰기 문법)는 들여쓰기와 줄바꿈을 사용합니다. 이 도구는 둘 다 컴파일하며 드롭다운에서 구문만 선택하면 됩니다.
어떤 Sass 기능이 지원되나요?
컴파일러는 공식 Dart Sass 엔진을 사용하므로 변수, 중첩, 믹스인, @include, 함수, @use, @extend, @if·@each 같은 제어 디렉티브, 압축 출력 스타일이 모두 지원됩니다.
압축(minify)된 CSS를 얻으려면?
컴파일하기 전에 출력 스타일 드롭다운을 ‘압축’으로 바꾸세요. 공백과 마지막 세미콜론이 제거되어 가장 작은 스타일시트가 만들어집니다.
오류에 줄 번호가 표시되는 이유는?
코드에 구문 오류가 있으면 Sass 엔진이 파싱이 실패한 정확한 줄과 열을 보고하고, 도구가 출력 위에 표시해 빠르게 고칠 수 있게 합니다.
내 Sass 코드가 서버로 업로드되나요?
아니요. Dart Sass 엔진 전체가 페이지에 포함되어 브라우저에서 로컬로 컴파일합니다. 스타일시트는 기기를 벗어나지 않으므로 비공개 프로젝트에도 안심하고 쓸 수 있습니다.
로컬 파일의 @import도 컴파일되나요?
아니요. 컴파일러는 메모리의 단일 코드 조각만 다루고 파일 시스템에 접근하지 않으므로, 파일 기반 import과 외부 partial의 @use는 처리할 수 없습니다.
오프라인에서도 되나요?
네. 페이지와 컴파일러 번들을 한 번 불러오면 컴파일은 전부 내 컴퓨터에서 이루어지며 연결이 필요 없습니다.
결과는 어떻게 사용하나요?
출력 아래 버튼으로 컴파일된 CSS를 복사하거나 style.css로 다운로드한 뒤, HTML에 연결하거나 프로젝트 스타일시트에 붙여 넣으세요.
Sass to CSS 변환 사용 방법
이 컴파일러는 공식 Dart Sass 엔진을 브라우저 안에서 전부 실행합니다. SCSS나 들여쓰기 Sass를 붙여 넣으면 깔끔한 CSS가 즉시 나옵니다. 변수, 믹스인, 중첩, 함수를 모두 지원하며 아무 것도 업로드되지 않습니다.
- Sass 또는 SCSS 코드를 입력 상자에 붙여 넣거나, 예제를 눌러 변수와 믹스인이 들어 있는 작동하는 데모를 불러오세요.
- 드롭다운에서 구문(SCSS 또는 들여쓰기 Sass)과 출력 스타일(확장 또는 압축)을 고르세요.
- 실시간 컴파일이 켜져 있으면 입력하는 즉시 CSS가 만들어지고, 꺼져 있으면 컴파일 버튼으로 수동 실행하세요.
- 구문 오류가 있으면 정확한 줄 번호와 메시지가 출력 위에 표시되어 빠르게 고칠 수 있습니다.
- 출력 아래의 복사 또는 다운로드 버튼으로 컴파일된 스타일시트를 style.css로 받아 가세요.
출력 스타일을 압축으로 선택하면 스타일시트가 미니파이됩니다. 소스에서 바로 프로덕션 빌드를 만들기에 좋습니다.
관련 도구
- CSS 뷰티파이어 CSS 코드를 즉시 포맷하고 정리합니다. 사용자 정의 옵션으로 압축된 CSS를 읽기 쉬운 코드로 변환합니다.
- CSS 압축기 무료 온라인 CSS 압축기. 공백, 주석, 불필요한 문자를 제거하여 CSS 코드를 즉시 압축하고 최적화합니다. 파일 크기를 줄여 웹 성능을 향상시킵니다.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- CSS Flexbox 생성기 라이브 미리보기가 있는 시각적 CSS Flexbox 생성기. Flex 속성을 조정하고 바로 사용할 수 있는 CSS 코드를 얻으세요.
- Chmod 계산기 체크박스 포함 Linux 파일 권한을 시각화하고 계산하는 무료 온라인 chmod 계산기. 숫자(755, 644)와 기호 표기법(rwxr-xr-x)을 즉시 변환. setuid, setgid, sticky bit 같은 특수 권한 지원.
- ASCII 코드표 10진수, 16진수, 8진수, 2진수 코드, HTML 엔티티 및 문자 설명을 포함한 완전한 ASCII 문자 인코딩 참조. 즉시 검색 및 필터링.
- HTTP 요청 테스터 브라우저에서 직접 REST API를 테스트하세요. 사용자 정의 헤더, 본문, 쿼리 매개변수로 GET, POST, PUT, DELETE 요청을 전송하고 응답 상태, 헤더, JSON 본문을 즉시 확인합니다.
- .htaccess 생성기 Apache .htaccess 규칙을 생성합니다. 리디렉션, 재작성, 보안 헤더, 캐싱 등.