본문으로 건너뛰기
Numio

SCSS를 표준 CSS로 변환 — Numio

SCSS(.scss, 중괄호 구문)를 Dart Sass로 일반 CSS로 컴파일한 뒤 Autoprefixer로 벤더 접두사를 추가합니다. 변수, @mixin/@include, 중첩, sass:math 같은 내장 모듈은 평평한 CSS 규칙으로 풀립니다.

.scss 스니펫(예: Bootstrap 스타일 컴포넌트)에서 컴파일된 CSS를 얻어 Sass 빌드 단계가 없는 프로젝트에 붙여 넣을 때.

Scss

CSS

이럴 때 사용하세요

  • .scss 스니펫(예: Bootstrap 스타일 컴포넌트)에서 컴파일된 CSS를 얻어 Sass 빌드 단계가 없는 프로젝트에 붙여 넣을 때.
  • SCSS 변경을 커밋하기 전에 중첩, & 선택자, darken() 같은 색상 함수가 어떻게 펼쳐지는지 디버깅할 때.

사용 방법

  1. Scss 편집기에 SCSS를 붙여 넣거나 .scss 파일을 끌어다 놓습니다.
  2. 설정을 열어 Autoprefixer 대상을 고릅니다: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. 처음에는 "defaults"만 켜져 있습니다.
  3. CSS 패널의 결과를 복사합니다. 일반 CSS이므로 바로 .css 파일로 저장할 수 있습니다.

SCSS 입력

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

세부 정보 및 제한 사항

컴파일은 서버에서 이루어집니다. 페이지가 코드를 /api/sass-to-css로 POST하면, 그곳에서 scss 구문으로 Dart Sass compileString을 호출합니다. 이후 Autoprefixer와 Prettier 포맷은 브라우저의 Web Worker에서 실행됩니다.

각 입력은 독립된 단일 파일로 컴파일됩니다. 직접 만든 partial을 @use나 @import하면 "Can't find stylesheet to import"로 실패하며, @use "sass:math" 같은 내장 모듈은 동작합니다.

입력에서 CSS가 생성되지 않으면(변수, mixin, 함수만 있는 경우) 오류 대신 CSS가 생성되지 않았다는 CSS 주석 하나가 결과로 나옵니다.

FAQ

@use "sass:math" 등 내장 모듈을 지원하나요?

네. 코드는 Dart Sass로 컴파일되므로 sass:math, sass:color, sass:map 같은 내장 모듈을 쓸 수 있습니다. 붙여 넣은 텍스트만 전송되므로 직접 만든 파일을 가져올 때만 실패합니다.

SCSS가 서버로 전송되나요?

네. 페이지는 컴파일을 위해 코드를 자체 /api/sass-to-css 엔드포인트로 POST합니다. 접두사 추가와 포맷은 그 뒤 브라우저에서 이루어집니다. 공유가 허용되지 않은 코드는 붙여 넣지 마세요.

.sass 들여쓰기 구문에도 쓸 수 있나요?

아니요. 이 페이지는 SCSS 구문으로 컴파일하므로 들여쓰기 기반 코드는 파싱에 실패합니다. 같은 API에 들여쓰기 구문 플래그를 보내는 Sass to CSS 페이지를 쓰세요.

오래된 브라우저용 벤더 접두사를 얻으려면 어떻게 하나요?

설정을 열고 "last 2 versions"나 "not ie < 11" 같은 대상을 켜세요. 선택한 쿼리가 Autoprefixer의 브라우저 목록으로 전달됩니다.

사양 및 참고 자료