SASS चीट शीट
खोजने और प्रिंट करने योग्य Sass / SCSS संदर्भ — वेरिएबल, नेस्टिंग, @use मॉड्यूल, मिक्सिन, फ़ंक्शन, कंट्रोल फ़्लो और बिल्ट-इन मॉड्यूल। निःशुल्क।
वेरिएबल
10$primary: #1d6f42;
वेरिएबल घोषित करें
$radius: 4px !default;
केवल अगर पहले से परिभाषित न हो तो सेट करें
$theme: dark !global;
ब्लॉक के अंदर से ग्लोबल स्कोप को असाइन करें
.box { $w: 10px; width: $w; }
लोकल वेरिएबल, ब्लॉक तक सीमित
$font-stack: 'Inter', sans-serif;
String / list मान
$gap: 8px * 2;
वेरिएबल गणना किए मान रख सकते हैं
color: $primary;
वेरिएबल को property मान के रूप में उपयोग करें
$sizes: 4px, 8px, 16px;
अल्पविराम-पृथक list वेरिएबल
$config: ('gap': 8px);
एक map वेरिएबल (key/value जोड़े)
$on: true;
control flow हेतु boolean वेरिएबल
नेस्टिंग
9.card { .title { color: red; } }
selector को उसके parent के अंदर nest करें
.btn { &:hover { opacity: .8; } }
& parent selector को संदर्भित करता है
.btn { &.is-active {} }
& के साथ संयुक्त parent selector
.list { & + & { margin-top: 8px; } }
& का उपयोग कर आसन्न-sibling नियम
.menu { .dark & { color: #fff; } }
context जोड़ने & को अंत में रखें
.box { font: { size: 14px; weight: 700; } }
namespace हेतु nested गुण (font-*)
.grid { > .col {} }
Nested child combinator
@media (min-width: 768px) { .col { width: 50%; } }
media queries को भी नियम के अंदर nest करें
.a { color: red; .b & { color: blue; } }
& को हिलाकर context पुनः क्रमित करें
Partial और module
10_base.scss
Partial फ़ाइल (शुरुआती underscore, अकेले संकलित नहीं)
@use 'base';
module लोड करें (फ़ाइल नाम से namespaced)
base.$primary;
member को उसके namespace से एक्सेस करें
@use 'base' as b;
कस्टम namespace के तहत module लोड करें
@use 'base' as *;
global namespace में लोड करें (कोई prefix नहीं)
@use 'theme' with ($primary: #000);
लोड पर module के !default वेरिएबल कॉन्फ़िगर करें
@forward 'buttons';
entrypoint से module पुनः-export करें
@forward 'buttons' as btn-*;
prefix के साथ member forward करें
@forward 'src/list' hide list-reset;
forward करें पर विशिष्ट member छिपाएं
@forward 'config' with ($gap: 4px !default);
forward करें और कॉन्फ़िगर योग्य डिफ़ॉल्ट सेट करें
Mixin
10@mixin reset { margin: 0; padding: 0; }
घोषणाओं का पुन: उपयोग योग्य ब्लॉक परिभाषित करें
@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; }
मान लौटाने वाला फ़ंक्शन परिभाषित करें
width: double(8px);
कस्टम फ़ंक्शन कॉल करें
@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; }
फ़ंक्शन में control flow हो सकता है
@use 'sass:math';
फ़ंक्शन में उपयोग हेतु built-in module import करें
@function half($n) { @return math.div($n, 2); }
अपने फ़ंक्शन में module फ़ंक्शन उपयोग करें
@function list-len($l) { @return list.length($l); }
फ़ंक्शन built-in को wrap कर सकते हैं
margin: sum(4px, 8px);
लौटाए मान को property मान के रूप में उपयोग करें
ऑपरेटर और गणित
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 {}
तार्किक and
@if not $disabled {}
तार्किक निषेध
Control flow
9@if $on { display: block; }
सशर्त ब्लॉक
@else if $alt { display: flex; }
अतिरिक्त शर्त
@else { display: none; }
Fallback शाखा
@each $c in red, green, blue {}
list पर पुनरावृत्ति करें
@each $name, $val in $map {}
map के key और value पर पुनरावृत्ति करें
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
map से नियम उत्पन्न करें
@for $i from 1 through 3 {}
अंतिम मान सहित लूप
@for $i from 0 to 3 {}
अंतिम मान को छोड़कर लूप
@while $i > 0 { $i: $i - 1; }
जब तक शर्त सही है तब तक loop करें
Built-in module
14@use 'sass:math'; math.floor(4.7)
निकटतम integer तक नीचे गोल करें
math.ceil(4.1)
निकटतम integer तक ऊपर गोल करें
math.round(4.5)
निकटतम integer तक गोल करें
math.percentage(math.div(1, 4))
इकाई-रहित अनुपात को प्रतिशत में बदलें
@use 'sass:string'; string.to-upper-case('hi')
string को uppercase करें
string.quote(hello)
मान को quotes में wrap करें
@use 'sass:color'; color.adjust($c, $lightness: 10%)
रंग चैनल को एक मात्रा से समायोजित करें
color.scale($c, $lightness: 20%)
रंग चैनल को तरल रूप से स्केल करें
color.mix($a, $b, 50%)
दो रंग मिलाएं
@use 'sass:list'; list.length($l)
list में आइटम की संख्या
list.nth($l, 1)
nवां आइटम प्राप्त करें (1-आधारित)
@use 'sass:map'; map.get($m, 'gap')
key से map से मान पढ़ें
map.merge($a, $b)
दो map मर्ज करें
map.keys($m)
map के key की list प्राप्त करें
Placeholder और inheritance
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: लक्ष्य अनुपस्थित हो तो त्रुटि न दें
%btn-base { padding: 8px; }
कई button में एक base साझा करें
.btn-primary { @extend %btn-base; }
@extend से कई selector एक नियम साझा करें
.btn-ghost { @extend %btn-base; }
प्रत्येक extension आउटपुट में समूहित होता है
@include card;
पैरामीटर पुन: उपयोग हेतु @extend के बजाय mixin पसंद करें
Interpolation और विविध
12.icon-#{$name} { content: ''; }
selector में वेरिएबल interpolate करें
width: calc(100% - #{$gap});
calc() के अंदर Sass मान interpolate करें
content: '#{$count} items';
string के अंदर interpolate करें
--bs-#{$key}: #{$val};
CSS कस्टम गुण गतिशील रूप से बनाएं
$map: ('sm': 576px, 'md': 768px);
key/value जोड़ों का map परिभाषित करें
map.get($map, 'md')
map मान पढ़ें (sass:map से)
@debug $value;
संकलन के दौरान console पर मान प्रिंट करें
@warn 'deprecated';
compile-time चेतावनी उत्सर्जित करें
@error 'invalid input';
त्रुटि के साथ संकलन रद्द करें
// inline comment
Silent टिप्पणी (आउटपुट से हटा दी जाती है)
/* block comment */
CSS टिप्पणी (/*! हो तो संपीड़ित आउटपुट में रखी जाती है)
@import 'base';
Legacy import — अप्रचलित, @use / @forward पसंद करें
कोई प्रविष्टि “:q” से मेल नहीं खाती।
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।