SASS چیٹ شیٹ
قابلِ تلاش اور قابلِ پرنٹ Sass / SCSS حوالہ — ویری ایبلز، نیسٹنگ، @use ماڈیولز، mixins، فنکشنز، کنٹرول فلو اور بلٹ اِن ماڈیولز۔ مفت۔
variables
10$primary: #1d6f42;
ایک variable کا اعلان کریں
$radius: 4px !default;
صرف اگر پہلے سے طے نہ ہو تو سیٹ کریں
$theme: dark !global;
block کے اندر سے global scope کو assign کریں
.box { $w: 10px; width: $w; }
local variable، block تک محدود
$font-stack: 'Inter', sans-serif;
string / list ویلیو
$gap: 8px * 2;
variables computed ویلیوز رکھ سکتے ہیں
color: $primary;
variable کو property ویلیو کے طور پر استعمال کریں
$sizes: 4px, 8px, 16px;
کوما سے جدا list variable
$config: ('gap': 8px);
map variable (key/value جوڑے)
$on: true;
control flow کے لیے boolean variable
nesting
9.card { .title { color: red; } }
selector کو اس کے parent کے اندر nest کریں
.btn { &:hover { opacity: .8; } }
& parent selector کا حوالہ دیتا ہے
.btn { &.is-active {} }
& کے ساتھ compound parent selector
.list { & + & { margin-top: 8px; } }
& استعمال کرتے ہوئے adjacent-sibling قاعدہ
.menu { .dark & { color: #fff; } }
context شامل کرنے کو & آخر میں رکھیں
.box { font: { size: 14px; weight: 700; } }
namespace کے لیے nested properties (font-*)
.grid { > .col {} }
nested child combinator
@media (min-width: 768px) { .col { width: 50%; } }
media queries کو بھی rule کے اندر nest کریں
.a { color: red; .b & { color: blue; } }
& منتقل کر کے context دوبارہ ترتیب دیں
partials اور modules
10_base.scss
partial فائل (ابتدائی underscore، اکیلے compile نہیں)
@use 'base';
module لوڈ کریں (فائل نام سے namespaced)
base.$primary;
member کو اس کے namespace کے ذریعے رسائی دیں
@use 'base' as b;
module کو کسٹم namespace کے تحت لوڈ کریں
@use 'base' as *;
global namespace میں لوڈ کریں (کوئی prefix نہیں)
@use 'theme' with ($primary: #000);
لوڈ پر module کے !default variables کنفگر کریں
@forward 'buttons';
entrypoint سے module دوبارہ export کریں
@forward 'buttons' as btn-*;
prefix کے ساتھ members forward کریں
@forward 'src/list' hide list-reset;
forward کریں مگر مخصوص members چھپائیں
@forward 'config' with ($gap: 4px !default);
forward کریں اور configurable defaults سیٹ کریں
mixins
10@mixin reset { margin: 0; padding: 0; }
declarations کا دوبارہ قابل استعمال block بنائیں
@include reset;
mixin لاگو کریں
@mixin pad($x) { padding: $x; }
argument کے ساتھ mixin
@include pad(8px);
include کرتے وقت argument پاس کریں
@mixin pad($x: 4px) { padding: $x; }
ڈیفالٹ ویلیو کے ساتھ argument
@include pad($x: 12px);
keyword سے argument پاس کریں
@mixin shadow($a...) { box-shadow: $a; }
صوابدیدی (variable) arguments
@mixin card { border: 1px solid; @content; }
@content block قبول کریں
@include card { color: red; }
mixin کے @content میں block پاس کریں
@mixin on-dark { @content; }
@content سے پاس کیے گئے rules لپیٹیں
فنکشنز
9@function double($n) { @return $n * 2; }
ویلیو لوٹانے والا function بنائیں
width: double(8px);
کسٹم function کال کریں
@function pad($x: 4px) { @return $x; }
ڈیفالٹ argument والا function
@function sum($a, $b) { @return $a + $b; }
متعدد arguments
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
functions میں control flow ہو سکتا ہے
@use 'sass:math';
functions میں استعمال کو built-in module import کریں
@function half($n) { @return math.div($n, 2); }
اپنے functions میں module functions استعمال کریں
@function list-len($l) { @return list.length($l); }
functions built-ins کو لپیٹ سکتے ہیں
margin: sum(4px, 8px);
لوٹائی ویلیو کو property ویلیو کے طور پر استعمال کریں
operators اور ریاضی
10@use 'sass:math';
تقسیم کے لیے math module لوڈ کریں
width: math.div(100%, 3);
تقسیم (math.div، متروک / نہیں)
width: 100% - 20px;
تفریق
margin: 4px + 4px;
جمع
width: 2 * 8px;
ضرب
$r: 10 % 3;
modulo (باقی)
@if $a == $b {}
مساوات کا موازنہ
@if $a >= 768px {}
بڑا یا برابر کا موازنہ
@if $a and $b {}
logical and
@if not $disabled {}
logical نفی
کنٹرول فلو
9@if $on { display: block; }
مشروط block
@else if $alt { display: flex; }
اضافی شرط
@else { display: none; }
fallback branch
@each $c in red, green, blue {}
list پر iterate کریں
@each $name, $val in $map {}
map کے keys اور values پر iterate کریں
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
map سے rules پیدا کریں
@for $i from 1 through 3 {}
اختتامی ویلیو سمیت loop
@for $i from 0 to 3 {}
اختتامی ویلیو کے بغیر loop
@while $i > 0 { $i: $i - 1; }
شرط برقرار رہنے تک loop کریں
built-in modules
14@use 'sass:math'; math.floor(4.7)
قریب ترین integer تک نیچے round کریں
math.ceil(4.1)
قریب ترین integer تک اوپر round کریں
math.round(4.5)
قریب ترین integer تک round کریں
math.percentage(math.div(1, 4))
unitless تناسب کو فیصد میں بدلیں
@use 'sass:string'; string.to-upper-case('hi')
string کو بڑے حروف میں کریں
string.quote(hello)
ویلیو کو quotes میں لپیٹیں
@use 'sass:color'; color.adjust($c, $lightness: 10%)
رنگ channel کو مقدار سے ایڈجسٹ کریں
color.scale($c, $lightness: 20%)
رنگ channel کو روانی سے scale کریں
color.mix($a, $b, 50%)
دو رنگوں کو blend کریں
@use 'sass:list'; list.length($l)
list میں items کی تعداد
list.nth($l, 1)
nواں item حاصل کریں (1-based)
@use 'sass:map'; map.get($m, 'gap')
key سے map سے ویلیو پڑھیں
map.merge($a, $b)
دو maps merge کریں
map.keys($m)
map کے keys کی list حاصل کریں
placeholders اور وراثت
9%card { border: 1px solid; }
placeholder selector (خود سے آؤٹ پٹ نہیں)
.box { @extend %card; }
placeholder کے styles وراثت میں لیں
.alert { color: red; }
extend کرنے کو ایک عام selector
.error { @extend .alert; }
حقیقی selector کو extend کریں
.note { @extend .alert !optional; }
!optional: target غائب ہو تو error نہ دیں
%btn-base { padding: 8px; }
کئی buttons میں ایک base شیئر کریں
.btn-primary { @extend %btn-base; }
@extend سے متعدد selectors ایک rule شیئر کرتے ہیں
.btn-ghost { @extend %btn-base; }
ہر extension آؤٹ پٹ میں گروپ ہوتی ہے
@include card;
parameterised reuse کے لیے @extend پر mixins کو ترجیح دیں
interpolation اور متفرق
12.icon-#{$name} { content: ''; }
selector میں variable interpolate کریں
width: calc(100% - #{$gap});
calc() کے اندر Sass ویلیو interpolate کریں
content: '#{$count} items';
string کے اندر interpolate کریں
--bs-#{$key}: #{$val};
CSS custom properties متحرک طور پر بنائیں
$map: ('sm': 576px, 'md': 768px);
key/value جوڑوں کا map بنائیں
map.get($map, 'md')
map ویلیو پڑھیں (sass:map کے ذریعے)
@debug $value;
compile کے دوران console پر ویلیو دکھائیں
@warn 'deprecated';
compile-time warning پیدا کریں
@error 'invalid input';
error کے ساتھ compilation ترک کریں
// inline comment
silent comment (آؤٹ پٹ سے ہٹا دیا جاتا ہے)
/* block comment */
CSS comment (/*! ہو تو compressed آؤٹ پٹ میں رہتا ہے)
@import 'base';
Legacy import — متروک، @use / @forward کو ترجیح دیں
کوئی اندراج “:q” سے میل نہیں کھاتا۔
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔