SASS 치트시트

모든 도구

무료

검색하고 인쇄할 수 있는 Sass / SCSS 참조 자료——변수, 중첩, @use 모듈, 믹스인, 함수, 제어 흐름, 내장 모듈. 무료.

Variables

$primary: #1d6f42;

Declare a variable

$radius: 4px !default;

Set only if not already defined

$theme: dark !global;

Assign to the global scope from inside a block

.box { $w: 10px; width: $w; }

Local variable, scoped to the block

$font-stack: 'Inter', sans-serif;

String / list value

$gap: 8px * 2;

Variables can hold computed values

color: $primary;

Use a variable as a property value

$sizes: 4px, 8px, 16px;

A comma-separated list variable

$config: ('gap': 8px);

A map variable (key/value pairs)

$on: true;

Boolean variable for control flow

Nesting

.card { .title { color: red; } }

Nest a selector inside its parent

.btn { &:hover { opacity: .8; } }

& refers to the parent selector

.btn { &.is-active {} }

Compound parent selector with &

.list { & + & { margin-top: 8px; } }

Adjacent-sibling rule using &

.menu { .dark & { color: #fff; } }

Place & last to prepend a context

.box { font: { size: 14px; weight: 700; } }

Nested properties for a namespace (font-*)

.grid { > .col {} }

Nested child combinator

@media (min-width: 768px) { .col { width: 50%; } }

Nest media queries inside a rule too

.a { color: red; .b & { color: blue; } }

Reorder context by moving &

Partials & modules

_base.scss

Partial file (leading underscore, not compiled alone)

@use 'base';

Load a module (namespaced by file name)

base.$primary;

Access a member through its namespace

@use 'base' as b;

Load a module under a custom namespace

@use 'base' as *;

Load into the global namespace (no prefix)

@use 'theme' with ($primary: #000);

Configure a module's !default variables on load

@forward 'buttons';

Re-export a module from an entrypoint

@forward 'buttons' as btn-*;

Forward members with a prefix

@forward 'src/list' hide list-reset;

Forward but hide specific members

@forward 'config' with ($gap: 4px !default);

Forward and set configurable defaults

Mixins

@mixin reset { margin: 0; padding: 0; }

Define a reusable block of declarations

@include reset;

Apply a mixin

@mixin pad($x) { padding: $x; }

Mixin with an argument

@include pad(8px);

Pass an argument when including

@mixin pad($x: 4px) { padding: $x; }

Argument with a default value

@include pad($x: 12px);

Pass an argument by keyword

@mixin shadow($a...) { box-shadow: $a; }

Arbitrary (variable) arguments

@mixin card { border: 1px solid; @content; }

Accept a @content block

@include card { color: red; }

Pass a block into the mixin's @content

@mixin on-dark { @content; }

Wrap arbitrary rules passed via @content

Functions

@function double($n) { @return $n * 2; }

Define a function that returns a value

width: double(8px);

Call a custom function

@function pad($x: 4px) { @return $x; }

Function with a default argument

@function sum($a, $b) { @return $a + $b; }

Multiple arguments

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

Functions may contain control flow

@use 'sass:math';

Import a built-in module for use in functions

@function half($n) { @return math.div($n, 2); }

Use module functions inside your own

@function list-len($l) { @return list.length($l); }

Functions can wrap built-ins

margin: sum(4px, 8px);

Use the returned value as a property value

Operators & math

@use 'sass:math';

Load the math module for division

width: math.div(100%, 3);

Division (math.div, not the deprecated /)

width: 100% - 20px;

Subtraction

margin: 4px + 4px;

Addition

width: 2 * 8px;

Multiplication

$r: 10 % 3;

Modulo (remainder)

@if $a == $b {}

Equality comparison

@if $a >= 768px {}

Greater-than-or-equal comparison

@if $a and $b {}

Logical and

@if not $disabled {}

Logical negation

Control flow

@if $on { display: block; }

Conditional block

@else if $alt { display: flex; }

Additional condition

@else { display: none; }

Fallback branch

@each $c in red, green, blue {}

Iterate over a list

@each $name, $val in $map {}

Iterate over a map's keys and values

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

Generate rules from a map

@for $i from 1 through 3 {}

Loop inclusive of the end value

@for $i from 0 to 3 {}

Loop exclusive of the end value

@while $i > 0 { $i: $i - 1; }

Loop while a condition holds

Built-in modules

@use 'sass:math'; math.floor(4.7)

Round down to the nearest integer

math.ceil(4.1)

Round up to the nearest integer

math.round(4.5)

Round to the nearest integer

math.percentage(math.div(1, 4))

Convert a unitless ratio to a percentage

@use 'sass:string'; string.to-upper-case('hi')

Uppercase a string

string.quote(hello)

Wrap a value in quotes

@use 'sass:color'; color.adjust($c, $lightness: 10%)

Adjust a colour channel by an amount

color.scale($c, $lightness: 20%)

Scale a colour channel fluidly

color.mix($a, $b, 50%)

Blend two colours

@use 'sass:list'; list.length($l)

Number of items in a list

list.nth($l, 1)

Get the nth item (1-based)

@use 'sass:map'; map.get($m, 'gap')

Read a value from a map by key

map.merge($a, $b)

Merge two maps

map.keys($m)

Get a list of a map's keys

Placeholders & inheritance

%card { border: 1px solid; }

Placeholder selector (not output on its own)

.box { @extend %card; }

Inherit a placeholder's styles

.alert { color: red; }

A normal selector to extend

.error { @extend .alert; }

Extend a real selector

.note { @extend .alert !optional; }

!optional: do not error if the target is missing

%btn-base { padding: 8px; }

Share a base across many buttons

.btn-primary { @extend %btn-base; }

Multiple selectors share one rule via @extend

.btn-ghost { @extend %btn-base; }

Each extension is grouped in the output

@include card;

Prefer mixins over @extend for parameterised reuse

Interpolation & misc

.icon-#{$name} { content: ''; }

Interpolate a variable into a selector

width: calc(100% - #{$gap});

Interpolate a Sass value inside calc()

content: '#{$count} items';

Interpolate inside a string

--bs-#{$key}: #{$val};

Build CSS custom properties dynamically

$map: ('sm': 576px, 'md': 768px);

Define a map of key/value pairs

map.get($map, 'md')

Read a map value (via sass:map)

@debug $value;

Print a value to the console while compiling

@warn 'deprecated';

Emit a compile-time warning

@error 'invalid input';

Abort compilation with an error

// inline comment

Silent comment (stripped from output)

/* block comment */

CSS comment (kept in compressed output if /*! )

@import 'base';

Legacy import — deprecated, prefer @use / @forward

“:q”와 일치하는 항목이 없습니다.

SASS 치트시트 소개

이 Sass / SCSS 치트시트는 전처리기를 구문부터 아키텍처까지 다룹니다: 변수, 중첩, 파셜과 모듈, 믹스인, 함수, 연산자와 수학, 제어 흐름, 내장 모듈, 플레이스홀더와 상속, 보간과 기타 잡다한 내용까지 포함합니다.

최신 Sass가 실제로 어떻게 작성되는지를 반영합니다 — @use 모듈 시스템과 네임스페이스가 적용된 내장 모듈을 클래식 기능들과 함께 다루므로, 오래된 @import 코드베이스를 유지보수하는 데도, 새로운 모듈 기반 스타일시트를 작성하는 데도 똑같이 유용합니다.

이 시트는 무료이며 클라이언트 사이드로 렌더링됩니다. 검색창으로 모든 스니펫을 실시간 필터링하고, 고정된 목차로 섹션으로 이동하고, 아무 스니펫이나 클릭해 스타일시트에 복사하고, 종이 SCSS 참고 자료를 위해 페이지를 인쇄하세요.

SASS 치트시트 사용 방법

변수와 중첩부터 믹스인, 내장 모듈까지 섹션을 훑어보세요.
mixin, @use, map 같은 기능을 검색해 시트를 실시간 필터링하세요.
고정된 사이드바를 통해 제어 흐름이나 플레이스홀더 및 상속으로 이동하세요.
스니펫이나 복사 아이콘을 클릭해 SCSS를 스타일시트에 복사하세요.
스타일을 리팩터링하는 동안 종이 참고 자료를 선호한다면 시트를 인쇄하세요.

자주 묻는 질문

열 개 섹션입니다: 변수, 중첩, 파셜과 모듈, 믹스인, 함수, 연산자와 수학, 제어 흐름, 내장 모듈, 플레이스홀더와 상속, 보간 및 기타 잡다한 내용입니다.

네. 파셜과 모듈 섹션은 @use 기반 임포트와 네임스페이스 지정을 보여주고, 내장 모듈 섹션은 최신 Sass에서 사용되는 네임스페이스가 적용된 표준 함수들을 나열합니다.

둘 다 시트에 있습니다: 믹스인은 @include로 포함되며 인수를 받을 수 있고, 플레이스홀더는 @extend로 확장되며 하나의 생성된 셀렉터를 공유합니다. 관련 섹션이 각각의 구문을 보여줍니다.

네. 아무 SCSS 스니펫이나 호버 시 나타나는 복사 아이콘을 클릭하면 짧은 확인 메시지와 함께 클립보드에 복사됩니다.

네, 완전히 무료입니다 — 클라이언트 사이드로 동작하며 검색과 인쇄가 가능하고 계정이 필요 없습니다.

SASS 치트시트

Variables

Nesting

Partials & modules

Mixins

Functions

Operators & math

Control flow

Built-in modules

Placeholders & inheritance

Interpolation & misc

SASS 치트시트 소개

SASS 치트시트 사용 방법

자주 묻는 질문

Sass 치트시트는 무엇을 다루나요?

@use 모듈 시스템도 다루나요?

믹스인과 플레이스홀더의 차이는 무엇인가요?

클릭 한 번으로 스니펫을 복사할 수 있나요?

SCSS 참고 자료는 무료인가요?

관련 도구

인기 검색어

이 도구 임베드하기