דף עזר SASS
מדריך Sass / SCSS לחיפוש והדפסה — משתנים, קינון, מודולי @use, mixins, פונקציות, בקרת זרימה ומודולים מובנים. בחינם.
משתנים
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; } }
קינון selector בתוך ההורה שלו
.btn { &:hover { opacity: .8; } }
& מתייחס ל-selector ההורה
.btn { &.is-active {} }
selector הורה מורכב עם &
.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 queries בתוך כלל גם
.a { color: red; .b & { color: blue; } }
סידור מחדש של ההקשר על ידי הזזת &
partials ומודולים
10_base.scss
קובץ partial (קו תחתון מוביל, לא מהודר לבד)
@use 'base';
טעינת מודול (ב-namespace לפי שם הקובץ)
base.$primary;
גישה לחבר דרך ה-namespace שלו
@use 'base' as b;
טעינת מודול תחת namespace מותאם
@use 'base' as *;
טעינה ל-namespace הגלובלי (ללא קידומת)
@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;
מודולו (שארית)
@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)
עטיפת ערך במרכאות
@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 לפי מפתח
map.merge($a, $b)
מיזוג שני maps
map.keys($m)
קבלת רשימת המפתחות של map
placeholders וירושה
9%card { border: 1px solid; }
selector placeholder (לא נפלט לבדו)
.box { @extend %card; }
ירושת סגנונות של placeholder
.alert { color: red; }
selector רגיל להרחבה
.error { @extend .alert; }
הרחבת selector אמיתי
.note { @extend .alert !optional; }
!optional: ללא שגיאה אם היעד חסר
%btn-base { padding: 8px; }
שיתוף בסיס בין כפתורים רבים
.btn-primary { @extend %btn-base; }
מספר selectors חולקים כלל אחד דרך @extend
.btn-ghost { @extend %btn-base; }
כל הרחבה מקובצת בפלט
@include card;
העדפת mixins על פני @extend לשימוש חוזר עם פרמטרים
אינטרפולציה ושונות
12.icon-#{$name} { content: ''; }
אינטרפולציה של משתנה לתוך selector
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';
ייבוא ישן — מיושן, העדף @use / @forward
אף רשומה אינה תואמת ל-„:q”.
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.