본문으로 건너뛰기
Numio

Sass를 표준 CSS로 변환 — Numio

Sass 들여쓰기 구문(.sass, 중괄호와 세미콜론 없음)을 Dart Sass로 일반 CSS로 컴파일한 뒤, 선택한 브라우저 대상에 맞춰 Autoprefixer를 실행합니다. 변수, mixin(=name / +name), 중첩은 평평한 CSS 규칙으로 풀립니다.

오래된 Rails나 Bulma 스타일 프로젝트의 들여쓰기 구문 .sass 파일이 어떻게 컴파일되는지 Sass 툴체인 없이 확인할 때.

Sass

CSS

이럴 때 사용하세요

  • 오래된 Rails나 Bulma 스타일 프로젝트의 들여쓰기 구문 .sass 파일이 어떻게 컴파일되는지 Sass 툴체인 없이 확인할 때.
  • Sass를 받지 않는 CMS, 이메일 템플릿, codepen에 붙여 넣을 일반 CSS를 .sass 스니펫에서 만들 때.

사용 방법

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

Sass 입력

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

세부 정보 및 제한 사항

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

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

벤더 접두사는 선택한 대상에 따라 달라집니다. 예시에서는 "defaults" 쿼리에서 user-select에 -webkit-와 -moz- 접두사가 붙습니다.

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

FAQ

여기서 Sass와 SCSS의 차이는 무엇인가요?

이 페이지는 들여쓰기 구문을 기대합니다. 들여쓰기로 중첩하고, 중괄호와 세미콜론이 없으며, =mixin과 +include 축약형을 씁니다. 중괄호 스타일 코드는 SCSS to CSS 페이지를 쓰세요. 두 페이지는 같은 API를 다른 구문 플래그로 호출합니다.

_variables.sass 같은 partial을 가져올 수 있나요?

아니요. 서버는 붙여 넣은 텍스트만 컴파일하며 파일 시스템이나 로드 경로가 없으므로, 직접 만든 파일을 가져오면 실패합니다. 대신 partial의 내용을 그것을 쓰는 코드 위에 붙여 넣으세요.

파일에 변수나 mixin만 있으면 어떻게 되나요?

Sass는 한 번도 쓰이지 않은 선언에 대해 CSS를 출력하지 않으므로 페이지에 /* No CSS generated: ... */ 주석이 표시됩니다. 변수를 쓰거나 mixin을 include하는 규칙을 추가하면 출력이 나옵니다.

출력이 압축(minify)되나요?

아니요. CSS는 펼친 형식이며 Prettier로 포맷됩니다. &:hover 같은 중첩 선택자는 .button:hover처럼 별도의 규칙으로 쓰입니다.

사양 및 참고 자료