Sass/SCSS 컴파일러
Sass/SCSS Compiler
브라우저에서 SCSS·Sass를 CSS로 바로 컴파일하는 놀이터 — dart-sass 엔진, 실시간 2분할 편집기, 기본/응용/심화 예제 갤러리, 연습 미션 8개, 치트시트를 제공합니다.
예제 갤러리
미션
0 / 8 완료위 편집기에 SCSS를 작성한 뒤 “정답 확인”을 누르면, 컴파일된 CSS를 정답과 비교해 채점합니다. 진행 상황은 브라우저에 저장됩니다.
변수로 색 통일하기
변수 $c 를 #4f46e5 로 정의하고, .a 와 .b 의 color 를 모두 그 변수로 지정하세요.
중첩으로 구조 만들기
.card 안에 .title 을 중첩해, 컴파일 결과가 ".card .title" 이 되도록 만드세요. .title 의 font-weight 는 700.
& 로 hover 상태 작성
.btn 에 & 를 사용해 :hover 규칙을 만들고, hover 시 color 를 red 로 지정하세요.
mixin 으로 flex center
center 라는 mixin(display:flex; align-items:center; justify-content:center)을 정의하고 .box 에 @include 하세요.
@each 로 유틸 클래스 생성
리스트 4, 8, 16 을 @each 로 돌며 .mt-4{margin-top:4px} … .mt-16{margin-top:16px} 유틸 클래스를 생성하세요.
@for 로 반복 클래스
@for 로 1부터 3까지 돌며 .pt-1{padding-top:1px} … .pt-3{padding-top:3px} 을 생성하세요.
@function 으로 double 만들기
@use "sass:math" 를 쓰고, 인자 $n 을 두 배로 돌려주는 double() 함수를 만들어 .a 의 width 를 double(8px) 로 지정하세요.
placeholder + @extend
%pill(placeholder)에 border-radius:999px 를 넣고, .tag 와 .chip 이 각각 @extend %pill 하도록 만드세요.
치트시트
변수 · 자료형
$primary: #4f46e5;- 변수 선언 (색/숫자/문자/리스트/맵)
$sizes: (8px, 16px);- 리스트
$map: ('a': 1, 'b': 2);- 맵 (키-값)
!default- 이미 값이 있으면 덮어쓰지 않음
중첩 · 선택자
.a { .b { } }- 자손 선택자 중첩
&:hover { }- 부모 참조 (상태)
&--modifier { }- BEM 변형
#{$var}- 보간(interpolation)
mixin · 함수
@mixin name($a) { }- mixin 정의
@include name(1);- mixin 사용
@content;- 전달된 블록 삽입
@function f($a) { @return $a; }- 값을 반환하는 함수
제어문
@if / @else if / @else- 조건 분기
@for $i from 1 through 3- 반복 (끝값 포함)
@each $x in $list- 리스트/맵 순회
@while $i > 0- 조건 반복
재사용 · 모듈
%placeholder + @extend- 스타일 상속(선택자 병합)
@use 'sass:math';- 내장 모듈 로드
@use 'partial' as p;- 다른 파일을 네임스페이스로
@forward- 재노출(re-export)
내장 모듈 함수
math.div(10px, 3)- 나눗셈 (/ 대체)
color.adjust($c, $lightness: -10%)- lighten/darken 대체
map.get($map, key)- 맵에서 값 꺼내기
string.to-upper-case($s)- 문자열 대문자
어떻게 동작하나요?
- 엔진은 dart-sass(공식 Sass 구현)를 dart2js로 컴파일한 순수 JavaScript 빌드입니다. WASM이 아니라 JS이지만, 진짜 SCSS 컴파일러가 브라우저에서 그대로 실행됩니다.
sass.compileString()은 동기 함수이므로 별도의 wasm 파일을 내려받지 않습니다. 엔진(약 3MB)만 jsDelivr CDN에서 최초 1회 지연 로딩합니다.- 모든 컴파일은 브라우저 안에서 처리되며, 입력한 코드는 서버로 전송되지 않습니다.
lighten()/darken()등 전역 함수는 최신 Dart Sass에서color.adjust()로 대체되었습니다(예제는 최신 문법 기준).