برگه تقلب SASS
مرجع Sass / SCSS قابل جستوجو و چاپ — متغیرها، تو در تو کردن، ماژولهای @use، mixinها، توابع، کنترل جریان و ماژولهای داخلی. رایگان.
متغیرها
10$primary: #1d6f42;
اعلام یک متغیر
$radius: 4px !default;
تنظیم تنها اگر از پیش تعریف نشده
$theme: dark !global;
تخصیص به scope سراسری از درون یک بلوک
.box { $w: 10px; width: $w; }
متغیر محلی، محدود به بلوک
$font-stack: 'Inter', sans-serif;
مقدار رشتهای / لیستی
$gap: 8px * 2;
متغیرها میتوانند مقادیر محاسبهشده نگه دارند
color: $primary;
استفاده از متغیر بهعنوان مقدار ویژگی
$sizes: 4px, 8px, 16px;
متغیر لیست جداشده با کاما
$config: ('gap': 8px);
متغیر map (جفتهای کلید/مقدار)
$on: true;
متغیر بولی برای کنترل جریان
تودرتوسازی
9.card { .title { color: red; } }
تودرتوکردن یک سلکتور درون والدش
.btn { &:hover { opacity: .8; } }
& به سلکتور والد اشاره دارد
.btn { &.is-active {} }
سلکتور والد مرکب با &
.list { & + & { margin-top: 8px; } }
قاعده خواهر-برادر مجاور با &
.menu { .dark & { color: #fff; } }
قراردادن & در انتها برای پیشافزودن یک زمینه
.box { font: { size: 14px; weight: 700; } }
ویژگیهای تودرتو برای یک namespace (font-*)
.grid { > .col {} }
ترکیبگر فرزند تودرتو
@media (min-width: 768px) { .col { width: 50%; } }
تودرتوکردن media queryها درون یک قاعده نیز
.a { color: red; .b & { color: blue; } }
بازچینش زمینه با جابهجایی &
partialها و ماژولها
10_base.scss
فایل partial (underscore ابتدایی، تنها کامپایل نمیشود)
@use 'base';
بارگذاری ماژول (namespace بر اساس نام فایل)
base.$primary;
دسترسی به یک عضو از طریق namespace آن
@use 'base' as b;
بارگذاری ماژول زیر یک namespace سفارشی
@use 'base' as *;
بارگذاری در namespace سراسری (بدون پیشوند)
@use 'theme' with ($primary: #000);
پیکربندی متغیرهای !default ماژول هنگام بارگذاری
@forward 'buttons';
صدور مجدد یک ماژول از یک entrypoint
@forward 'buttons' as btn-*;
forward اعضا با یک پیشوند
@forward 'src/list' hide list-reset;
forward با پنهانکردن اعضای مشخص
@forward 'config' with ($gap: 4px !default);
forward و تنظیم پیشفرضهای قابلپیکربندی
mixinها
10@mixin reset { margin: 0; padding: 0; }
تعریف بلوک قابلاستفادهمجدد از اعلانها
@include reset;
اعمال یک mixin
@mixin pad($x) { padding: $x; }
mixin با یک آرگومان
@include pad(8px);
ارسال آرگومان هنگام include
@mixin pad($x: 4px) { padding: $x; }
آرگومان با مقدار پیشفرض
@include pad($x: 12px);
ارسال آرگومان با کلیدواژه
@mixin shadow($a...) { box-shadow: $a; }
آرگومانهای دلخواه (متغیر)
@mixin card { border: 1px solid; @content; }
پذیرش یک بلوک @content
@include card { color: red; }
ارسال یک بلوک به @content مربوط به mixin
@mixin on-dark { @content; }
احاطه قواعد دلخواه ارسالی از طریق @content
توابع
9@function double($n) { @return $n * 2; }
تعریف تابعی که مقداری بازمیگرداند
width: double(8px);
فراخوانی یک تابع سفارشی
@function pad($x: 4px) { @return $x; }
تابع با آرگومان پیشفرض
@function sum($a, $b) { @return $a + $b; }
چند آرگومان
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
توابع میتوانند شامل کنترل جریان باشند
@use 'sass:math';
وارد کردن ماژول داخلی برای استفاده در توابع
@function half($n) { @return math.div($n, 2); }
استفاده از توابع ماژول درون توابع خود
@function list-len($l) { @return list.length($l); }
توابع میتوانند توابع داخلی را در بر گیرند
margin: sum(4px, 8px);
استفاده از مقدار بازگشتی بهعنوان مقدار ویژگی
عملگرها و ریاضی
10@use 'sass:math';
بارگذاری ماژول math برای تقسیم
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 {}
نفی منطقی
جریان کنترل
9@if $on { display: block; }
بلوک شرطی
@else if $alt { display: flex; }
شرط افزوده
@else { display: none; }
شاخه پیشفرض
@each $c in red, green, blue {}
پیمایش روی یک لیست
@each $name, $val in $map {}
پیمایش روی کلیدها و مقادیر یک map
@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; }
حلقه تا برقراری شرط
ماژولهای داخلی
14@use 'sass:math'; math.floor(4.7)
گردکردن به پایین به نزدیکترین عدد صحیح
math.ceil(4.1)
گردکردن به بالا به نزدیکترین عدد صحیح
math.round(4.5)
گردکردن به نزدیکترین عدد صحیح
math.percentage(math.div(1, 4))
تبدیل نسبت بدونواحد به درصد
@use 'sass:string'; string.to-upper-case('hi')
بزرگکردن حروف یک رشته
string.quote(hello)
قراردادن یک مقدار درون quoteها
@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.nth($l, 1)
گرفتن قلم n اُم (مبنای ۱)
@use 'sass:map'; map.get($m, 'gap')
خواندن مقدار از map با کلید
map.merge($a, $b)
ادغام دو map
map.keys($m)
گرفتن فهرست کلیدهای یک map
placeholderها و وراثت
9%card { border: 1px solid; }
سلکتور placeholder (بهتنهایی خروجی نمیشود)
.box { @extend %card; }
ارثبری از سبکهای یک placeholder
.alert { color: red; }
یک سلکتور معمولی برای extend
.error { @extend .alert; }
extend یک سلکتور واقعی
.note { @extend .alert !optional; }
!optional: در نبود هدف خطا نده
%btn-base { padding: 8px; }
اشتراک یک پایه میان چندین دکمه
.btn-primary { @extend %btn-base; }
چند سلکتور یک قاعده را با @extend به اشتراک میگذارند
.btn-ghost { @extend %btn-base; }
هر extension در خروجی گروهبندی میشود
@include card;
ترجیح mixin بر @extend برای استفادهمجدد پارامتری
میانیابی و متفرقه
12.icon-#{$name} { content: ''; }
میانیابی یک متغیر در یک سلکتور
width: calc(100% - #{$gap});
میانیابی یک مقدار Sass درون calc()
content: '#{$count} items';
میانیابی درون یک رشته
--bs-#{$key}: #{$val};
ساخت پویای ویژگیهای سفارشی CSS
$map: ('sm': 576px, 'md': 768px);
تعریف یک map از جفتهای کلید/مقدار
map.get($map, 'md')
خواندن مقدار map (از طریق sass:map)
@debug $value;
چاپ یک مقدار در کنسول هنگام کامپایل
@warn 'deprecated';
تولید هشدار زمان کامپایل
@error 'invalid input';
لغو کامپایل با یک خطا
// inline comment
توضیح خاموش (از خروجی حذف میشود)
/* block comment */
توضیح CSS (در خروجی فشرده با /*! حفظ میشود)
@import 'base';
import قدیمی — منسوخ، @use / @forward را ترجیح دهید
هیچ موردی با «:q» مطابقت ندارد.
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.