SASS চিট শিট
অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Sass / SCSS রেফারেন্স — ভেরিয়েবল, নেস্টিং, @use মডিউল, মিক্সিন, ফাংশন, কন্ট্রোল ফ্লো এবং বিল্ট-ইন মডিউল। বিনামূল্যে।
Variable
10$primary: #1d6f42;
variable ঘোষণা করুন
$radius: 4px !default;
আগে সংজ্ঞায়িত না থাকলে সেট করুন
$theme: dark !global;
block-এর ভিতর থেকে global scope-এ assign করুন
.box { $w: 10px; width: $w; }
Local variable, block-এ scoped
$font-stack: 'Inter', sans-serif;
String / list মান
$gap: 8px * 2;
variable computed মান ধারণ করতে পারে
color: $primary;
property মান হিসেবে variable ব্যবহার করুন
$sizes: 4px, 8px, 16px;
comma-পৃথক list variable
$config: ('gap': 8px);
map variable (key/value জোড়া)
$on: true;
control flow-এর জন্য boolean variable
Nesting
9.card { .title { color: red; } }
parent-এর ভিতরে selector 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 property (font-*)
.grid { > .col {} }
Nested child combinator
@media (min-width: 768px) { .col { width: 50%; } }
নিয়মের ভিতরেও media query nest করুন
.a { color: red; .b & { color: blue; } }
& সরিয়ে context পুনর্বিন্যাস করুন
Partial ও module
10_base.scss
Partial ফাইল (শুরুতে underscore, একা compile হয় না)
@use 'base';
module লোড করুন (ফাইল নামে namespaced)
base.$primary;
namespace-এর মাধ্যমে member অ্যাক্সেস করুন
@use 'base' as b;
কাস্টম namespace-এ module লোড করুন
@use 'base' as *;
global namespace-এ লোড করুন (prefix নেই)
@use 'theme' with ($primary: #000);
লোডে module-এর !default variable কনফিগার করুন
@forward 'buttons';
entrypoint থেকে module re-export করুন
@forward 'buttons' as btn-*;
prefix সহ member forward করুন
@forward 'src/list' hide list-reset;
forward করুন কিন্তু নির্দিষ্ট member লুকান
@forward 'config' with ($gap: 4px !default);
forward করে configurable ডিফল্ট সেট করুন
Mixin
10@mixin reset { margin: 0; padding: 0; }
পুনর্ব্যবহারযোগ্য declaration ব্লক সংজ্ঞায়িত করুন
@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) argument
@mixin card { border: 1px solid; @content; }
@content ব্লক গ্রহণ করুন
@include card { color: red; }
mixin-এর @content-এ ব্লক পাঠান
@mixin on-dark { @content; }
@content-এ পাঠানো যথেচ্ছ নিয়ম wrap করুন
ফাংশন
9@function double($n) { @return $n * 2; }
মান return করে এমন function সংজ্ঞায়িত করুন
width: double(8px);
কাস্টম function কল করুন
@function pad($x: 4px) { @return $x; }
ডিফল্ট argument সহ function
@function sum($a, $b) { @return $a + $b; }
একাধিক argument
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
function-এ control flow থাকতে পারে
@use 'sass:math';
function-এ ব্যবহারে built-in module import করুন
@function half($n) { @return math.div($n, 2); }
নিজের function-এ module function ব্যবহার করুন
@function list-len($l) { @return list.length($l); }
function built-in wrap করতে পারে
margin: sum(4px, 8px);
return করা মান property মান হিসেবে ব্যবহার করুন
Operator ও গণিত
10@use 'sass:math';
ভাগের জন্য math module লোড করুন
width: math.div(100%, 3);
ভাগ (math.div, deprecated / নয়)
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 negation
কন্ট্রোল ফ্লো
9@if $on { display: block; }
Conditional ব্লক
@else if $alt { display: flex; }
অতিরিক্ত শর্ত
@else { display: none; }
Fallback শাখা
@each $c in red, green, blue {}
list-এর উপর iterate করুন
@each $name, $val in $map {}
map-এর key ও value-এর উপর iterate করুন
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
map থেকে নিয়ম তৈরি করুন
@for $i from 1 through 3 {}
শেষ মান অন্তর্ভুক্ত করে loop
@for $i from 0 to 3 {}
শেষ মান বাদ দিয়ে loop
@while $i > 0 { $i: $i - 1; }
শর্ত বহাল থাকা পর্যন্ত loop
Built-in module
14@use 'sass:math'; math.floor(4.7)
নিকটতম পূর্ণসংখ্যায় নিচে round করুন
math.ceil(4.1)
নিকটতম পূর্ণসংখ্যায় উপরে round করুন
math.round(4.5)
নিকটতম পূর্ণসংখ্যায় round করুন
math.percentage(math.div(1, 4))
unitless অনুপাত শতাংশে রূপান্তর করুন
@use 'sass:string'; string.to-upper-case('hi')
স্ট্রিং uppercase করুন
string.quote(hello)
মান quote-এ wrap করুন
@use 'sass:color'; color.adjust($c, $lightness: 10%)
রঙ channel একটি পরিমাণে সমন্বয় করুন
color.scale($c, $lightness: 20%)
রঙ channel মসৃণভাবে scale করুন
color.mix($a, $b, 50%)
দুটি রঙ মিশ্রিত করুন
@use 'sass:list'; list.length($l)
list-এ আইটেম সংখ্যা
list.nth($l, 1)
nতম আইটেম নিন (1-based)
@use 'sass:map'; map.get($m, 'gap')
key দিয়ে map থেকে মান পড়ুন
map.merge($a, $b)
দুটি map merge করুন
map.keys($m)
map-এর key-এর তালিকা নিন
Placeholder ও inheritance
9%card { border: 1px solid; }
Placeholder selector (একা আউটপুট হয় না)
.box { @extend %card; }
placeholder-এর style inherit করুন
.alert { color: red; }
extend করার জন্য সাধারণ selector
.error { @extend .alert; }
প্রকৃত selector extend করুন
.note { @extend .alert !optional; }
!optional: target অনুপস্থিত হলে error না
%btn-base { padding: 8px; }
অনেক button জুড়ে base শেয়ার করুন
.btn-primary { @extend %btn-base; }
@extend-এ একাধিক selector এক নিয়ম শেয়ার করে
.btn-ghost { @extend %btn-base; }
প্রতি extension আউটপুটে group হয়
@include card;
parameterised reuse-এ @extend-এর বদলে mixin
Interpolation ও বিবিধ
12.icon-#{$name} { content: ''; }
selector-এ variable interpolate করুন
width: calc(100% - #{$gap});
calc()-এ Sass মান interpolate করুন
content: '#{$count} items';
স্ট্রিং-এ interpolate করুন
--bs-#{$key}: #{$val};
CSS custom property গতিশীলভাবে তৈরি করুন
$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 abort করুন
// inline comment
Silent comment (আউটপুট থেকে বাদ)
/* block comment */
CSS comment (/*! হলে compressed আউটপুটে থাকে)
@import 'base';
Legacy import — deprecated, @use / @forward পছন্দ করুন
“:q”-এর সাথে কোনো এন্ট্রি মেলে না।
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।