برگه تقلب SASS

رایگان

مرجع Sass / SCSS قابل جست‌وجو و چاپ — متغیرها، تو در تو کردن، ماژول‌های @use، mixinها، توابع، کنترل جریان و ماژول‌های داخلی. رایگان.

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 cheat sheet scss syntax reference sass mixins example sass variables sass nesting rules use vs import sass sass built-in modules sass each and for loops

به کمک نیاز دارید؟

با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.

گزارش مشکل

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.

<iframe src="https://tweakee.com/fa/tools/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>

برگه تقلب SASS

Variables

Nesting

Partials & modules

Mixins

Functions

Operators & math

Control flow

Built-in modules

Placeholders & inheritance

Interpolation & misc

درباره برگه تقلب SASS

نحوه استفاده از برگه تقلب SASS

سوالات متداول

جزوه‌ی Sass چه چیزهایی را پوشش می‌دهد؟

آیا سیستم ماژول @use را پوشش می‌دهد؟

تفاوت میکسین و جای‌گیر چیست؟

آیا می‌توانم قطعه‌کدها را با یک کلیک کپی کنم؟

آیا مرجع SCSS رایگان است؟

ابزارهای مرتبط

جستجوهای پرطرفدار

این ابزار را جاسازی کنید