SASS 치트시트
검색하고 인쇄할 수 있는 Sass / SCSS 참조 자료——변수, 중첩, @use 모듈, 믹스인, 함수, 제어 흐름, 내장 모듈. 무료.
변수
10$primary: #1d6f42;
변수 선언
$radius: 4px !default;
아직 정의되지 않은 경우에만 설정
$theme: dark !global;
블록 내부에서 전역 범위에 할당
.box { $w: 10px; width: $w; }
지역 변수, 블록 범위
$font-stack: 'Inter', sans-serif;
문자열 / 리스트 값
$gap: 8px * 2;
변수는 계산된 값을 가질 수 있음
color: $primary;
변수를 속성 값으로 사용
$sizes: 4px, 8px, 16px;
쉼표 구분 리스트 변수
$config: ('gap': 8px);
맵 변수 (키/값 쌍)
$on: true;
제어 흐름용 불리언 변수
중첩
9.card { .title { color: red; } }
부모 안에 선택자 중첩
.btn { &:hover { opacity: .8; } }
&는 부모 선택자를 참조
.btn { &.is-active {} }
&로 복합 부모 선택자
.list { & + & { margin-top: 8px; } }
&를 사용한 인접 형제 규칙
.menu { .dark & { color: #fff; } }
&를 마지막에 두어 컨텍스트 추가
.box { font: { size: 14px; weight: 700; } }
네임스페이스용 중첩 속성 (font-*)
.grid { > .col {} }
중첩 자식 결합자
@media (min-width: 768px) { .col { width: 50%; } }
규칙 안에 미디어 쿼리도 중첩
.a { color: red; .b & { color: blue; } }
&를 옮겨 컨텍스트 재배치
파셜 및 모듈
10_base.scss
파셜 파일 (선행 밑줄, 단독 컴파일 안 됨)
@use 'base';
모듈 로드 (파일 이름으로 네임스페이스)
base.$primary;
네임스페이스를 통해 멤버 접근
@use 'base' as b;
사용자 지정 네임스페이스로 모듈 로드
@use 'base' as *;
전역 네임스페이스로 로드 (접두사 없음)
@use 'theme' with ($primary: #000);
로드 시 모듈의 !default 변수 구성
@forward 'buttons';
엔트리포인트에서 모듈 재내보내기
@forward 'buttons' as btn-*;
접두사와 함께 멤버 전달
@forward 'src/list' hide list-reset;
전달하되 특정 멤버 숨김
@forward 'config' with ($gap: 4px !default);
전달 및 구성 가능 기본값 설정
믹스인
10@mixin reset { margin: 0; padding: 0; }
재사용 가능한 선언 블록 정의
@include reset;
믹스인 적용
@mixin pad($x) { padding: $x; }
인수가 있는 믹스인
@include pad(8px);
포함 시 인수 전달
@mixin pad($x: 4px) { padding: $x; }
기본값이 있는 인수
@include pad($x: 12px);
키워드로 인수 전달
@mixin shadow($a...) { box-shadow: $a; }
임의(가변) 인수
@mixin card { border: 1px solid; @content; }
@content 블록 수용
@include card { color: red; }
믹스인의 @content에 블록 전달
@mixin on-dark { @content; }
@content로 전달된 임의 규칙 래핑
함수
9@function double($n) { @return $n * 2; }
값을 반환하는 함수 정의
width: double(8px);
사용자 정의 함수 호출
@function pad($x: 4px) { @return $x; }
기본 인자가 있는 함수
@function sum($a, $b) { @return $a + $b; }
다중 인수
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
함수에 제어 흐름 포함 가능
@use 'sass:math';
함수에서 쓸 내장 모듈 임포트
@function half($n) { @return math.div($n, 2); }
사용자 함수 안에서 모듈 함수 사용
@function list-len($l) { @return list.length($l); }
함수가 내장 함수를 래핑 가능
margin: sum(4px, 8px);
반환 값을 속성 값으로 사용
연산자 및 수학
10@use 'sass:math';
나눗셈용 math 모듈 로드
width: math.div(100%, 3);
나눗셈 (사용 중단 / 대신 math.div)
width: 100% - 20px;
뺄셈
margin: 4px + 4px;
덧셈
width: 2 * 8px;
곱셈
$r: 10 % 3;
모듈로 (나머지)
@if $a == $b {}
등가 비교
@if $a >= 768px {}
크거나 같음 비교
@if $a and $b {}
논리 and
@if not $disabled {}
논리 부정
제어 흐름
9@if $on { display: block; }
조건 블록
@else if $alt { display: flex; }
추가 조건
@else { display: none; }
대체 분기
@each $c in red, green, blue {}
리스트 순회
@each $name, $val in $map {}
맵의 키와 값 순회
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
맵으로부터 규칙 생성
@for $i from 1 through 3 {}
끝 값을 포함한 반복
@for $i from 0 to 3 {}
끝 값을 제외한 반복
@while $i > 0 { $i: $i - 1; }
조건이 참인 동안 반복
내장 모듈
14@use 'sass:math'; math.floor(4.7)
가장 가까운 정수로 내림
math.ceil(4.1)
가장 가까운 정수로 올림
math.round(4.5)
가장 가까운 정수로 반올림
math.percentage(math.div(1, 4))
단위 없는 비율을 백분율로 변환
@use 'sass:string'; string.to-upper-case('hi')
문자열 대문자화
string.quote(hello)
값을 따옴표로 감싸기
@use 'sass:color'; color.adjust($c, $lightness: 10%)
색상 채널을 일정량 조정
color.scale($c, $lightness: 20%)
색상 채널을 유동적으로 스케일
color.mix($a, $b, 50%)
두 색상 혼합
@use 'sass:list'; list.length($l)
리스트의 항목 수
list.nth($l, 1)
n번째 항목 가져오기 (1부터)
@use 'sass:map'; map.get($m, 'gap')
키로 맵에서 값 읽기
map.merge($a, $b)
두 맵 병합
map.keys($m)
맵의 키 리스트 가져오기
플레이스홀더 및 상속
9%card { border: 1px solid; }
플레이스홀더 선택자 (단독 출력 안 됨)
.box { @extend %card; }
플레이스홀더의 스타일 상속
.alert { color: red; }
확장할 일반 선택자
.error { @extend .alert; }
실제 선택자 확장
.note { @extend .alert !optional; }
!optional: 대상 없어도 오류 없음
%btn-base { padding: 8px; }
여러 버튼에 베이스 공유
.btn-primary { @extend %btn-base; }
@extend로 여러 선택자가 한 규칙 공유
.btn-ghost { @extend %btn-base; }
각 확장은 출력에서 그룹화됨
@include card;
매개변수화 재사용에는 @extend보다 믹스인 선호
보간 및 기타
12.icon-#{$name} { content: ''; }
선택자에 변수 보간
width: calc(100% - #{$gap});
calc() 안에 Sass 값 보간
content: '#{$count} items';
문자열 안에 보간
--bs-#{$key}: #{$val};
CSS 사용자 정의 속성 동적 생성
$map: ('sm': 576px, 'md': 768px);
키/값 쌍 맵 정의
map.get($map, 'md')
맵 값 읽기 (sass:map 사용)
@debug $value;
컴파일 중 값을 콘솔에 출력
@warn 'deprecated';
컴파일 타임 경고 발생
@error 'invalid input';
오류와 함께 컴파일 중단
// inline comment
조용한 주석 (출력에서 제거됨)
/* block comment */
CSS 주석 (/*! 이면 압축 출력에 유지)
@import 'base';
레거시 import — 사용 중단, @use / @forward 선호
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.