SASS چیٹ شیٹ

مفت

قابلِ تلاش اور قابلِ پرنٹ Sass / SCSS حوالہ — ویری ایبلز، نیسٹنگ، @use ماڈیولز، mixins، فنکشنز، کنٹرول فلو اور بلٹ اِن ماڈیولز۔ مفت۔

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 چیٹ شیٹ استعمال کرنے کا طریقہ

سیکشنز کا جائزہ لیں، Variables اور Nesting سے لے کر Mixins سے Built-in modules تک۔
شیٹ کو فوری طور پر فلٹر کرنے کے لیے mixin، @use یا map جیسی خصوصیت تلاش کریں۔
اسٹکی سائیڈ بار کے ذریعے Control flow یا Placeholders & inheritance پر جائیں۔
اپنی اسٹائل شیٹ میں 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 حوالہ مفت ہے؟

متعلقہ ٹولز

مقبول تلاشیں

یہ ٹول ایمبیڈ کریں