ورقة SASS المرجعية
مرجع Sass / SCSS قابل للبحث والطباعة — المتغيرات، التداخل، وحدات @use، المخاليط، الدوال، التحكم في التدفق والوحدات المدمجة. مجانًا.
المتغيرات
10$primary: #1d6f42;
إعلان متغيّر
$radius: 4px !default;
التعيين فقط إن لم يكن معرّفاً
$theme: dark !global;
الإسناد للنطاق العام من داخل كتلة
.box { $w: 10px; width: $w; }
متغيّر محلي محصور بالكتلة
$font-stack: 'Inter', sans-serif;
قيمة سلسلة / قائمة
$gap: 8px * 2;
يمكن للمتغيرات أن تحمل قيماً محسوبة
color: $primary;
استخدام متغيّر كقيمة خاصية
$sizes: 4px, 8px, 16px;
متغيّر قائمة مفصول بفواصل
$config: ('gap': 8px);
متغيّر خريطة (أزواج مفتاح/قيمة)
$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; } }
خصائص متداخلة لمساحة اسم (font-*)
.grid { > .col {} }
مُركِّب طفل متداخل
@media (min-width: 768px) { .col { width: 50%; } }
تداخل استعلامات الوسائط داخل قاعدة أيضاً
.a { color: red; .b & { color: blue; } }
إعادة ترتيب السياق بنقل &
الجزئيات والوحدات
10_base.scss
ملف جزئي (شرطة سفلية بادئة، لا يُجمَّع وحده)
@use 'base';
تحميل وحدة (مُسمّاة بمساحة اسم الملف)
base.$primary;
الوصول إلى عضو عبر مساحة اسمه
@use 'base' as b;
تحميل وحدة تحت مساحة اسم مخصصة
@use 'base' as *;
التحميل في المساحة العامة (بلا بادئة)
@use 'theme' with ($primary: #000);
تهيئة متغيرات !default للوحدة عند التحميل
@forward 'buttons';
إعادة تصدير وحدة من نقطة دخول
@forward 'buttons' as btn-*;
تمرير الأعضاء ببادئة
@forward 'src/list' hide list-reset;
التمرير مع إخفاء أعضاء محددين
@forward 'config' with ($gap: 4px !default);
التمرير وتعيين افتراضيات قابلة للتهيئة
الـ Mixins
10@mixin reset { margin: 0; padding: 0; }
تعريف كتلة تصريحات قابلة لإعادة الاستخدام
@include reset;
تطبيق mixin
@mixin pad($x) { padding: $x; }
mixin بوسيط
@include pad(8px);
تمرير وسيط عند التضمين
@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 {}
المرور على مفاتيح وقيم خريطة
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
توليد قواعد من خريطة
@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)
تغليف قيمة بعلامات اقتباس
@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 (يبدأ من 1)
@use 'sass:map'; map.get($m, 'gap')
قراءة قيمة من خريطة بالمفتاح
map.merge($a, $b)
دمج خريطتين
map.keys($m)
الحصول على قائمة بمفاتيح خريطة
النائبات والوراثة
9%card { border: 1px solid; }
مُحدِّد نائب (لا يُخرَج وحده)
.box { @extend %card; }
وراثة أنماط نائب
.alert { color: red; }
مُحدِّد عادي للتمديد
.error { @extend .alert; }
تمديد مُحدِّد حقيقي
.note { @extend .alert !optional; }
!optional: لا خطأ إن كان الهدف مفقوداً
%btn-base { padding: 8px; }
مشاركة أساس عبر أزرار كثيرة
.btn-primary { @extend %btn-base; }
تشارُك عدة مُحدِّدات قاعدة واحدة عبر @extend
.btn-ghost { @extend %btn-base; }
كل تمديد مُجمّع في الإخراج
@include card;
فضّل الـ mixins على @extend لإعادة الاستخدام المُمعلَمة
الاستيفاء ومتفرقات
12.icon-#{$name} { content: ''; }
استيفاء متغيّر داخل مُحدِّد
width: calc(100% - #{$gap});
استيفاء قيمة Sass داخل calc()
content: '#{$count} items';
الاستيفاء داخل سلسلة
--bs-#{$key}: #{$val};
بناء خصائص CSS مخصصة ديناميكياً
$map: ('sm': 576px, 'md': 768px);
تعريف خريطة أزواج مفتاح/قيمة
map.get($map, 'md')
قراءة قيمة خريطة (عبر sass:map)
@debug $value;
طباعة قيمة إلى الطرفية أثناء التجميع
@warn 'deprecated';
إصدار تحذير وقت التجميع
@error 'invalid input';
إجهاض التجميع بخطأ
// inline comment
تعليق صامت (يُزال من الإخراج)
/* block comment */
تعليق CSS (يُبقى في الإخراج المضغوط إن /*! )
@import 'base';
استيراد قديم — مهجور، فضّل @use / @forward
لا يوجد إدخال يطابق “:q”.
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.