מה זה סאס? למד כיצד להשתמש בשפת הרחבת CSS הזו

גיליונות סגנונות מדהימים מבחינה תחבירית (Sass) היא שפת הרחבות CSS פופולרית. השפה קיימת כ-15 שנה. זה עובד היטב עם כל גרסה של CSS, מה שהופך אותו לתואם לכל ספריית CSS ומסגרת, מ-Bootstrap ועד Foundation.

השפה מאפשרת לך לכתוב קוד Sass ולאחר מכן לקמפל את הקוד הזה ל-CSS. הערך של שימוש ב-Sass במקום ב-CSS רגיל הוא בכך שהוא מספק תכונות נוספות שנמצאות כרגע מחוץ לתחום ה-CSS.

במדריך זה, תלמד כיצד להשתמש ב-Sass ובתכונות החשובות ביותר שלו.

התקנת Sass

ישנן מספר דרכים להשתמש ב-Sass במכשיר שלך. אלה כוללים הפעלת אפליקציה (כגון LiveReload או Scout-App), הורדה Sass מ-GitHub, או התקנתו באמצעות npm.

התקנת Sass עם npm

כדי להתקין את Sass באמצעות npm תצטרך התקן את NodeJS ו-npm במכשיר שלך. לאחר מכן תצטרך ליצור א package.json קובץ (שזה נוהג טוב בעת התקנת חבילת npm בפרויקטים שלך). אתה יכול ליצור בסיסי package.json קובץ בספריית הפרויקט שלך עם פקודת המסוף הבאה:

npm init -y

הפעלת פקודה זו תיצור קובץ package.json עם התוכן הבא:

{
 "name": "my_app",
 "version": "1.0.0",
 "תיאור": "",
 "main": "index.js",
 "סקריפטים": {
 "test": "echo \"שגיאה: לא צוינה בדיקה\" && יציאה 1"
 },
 "מילות מפתח": [],
 "author": "",
 "רישיון": "ISC"
}

ה package.json הקובץ חשוב מכיוון שהוא משמש כתצורה עבור הפרויקט שלך. בכל פעם שאתה מתקין חבילת npm חדשה package.json הקובץ ישקף זאת.

כעת תוכל להתקין את Sass על ידי הכנסת הפקודה הבאה למסוף שלך:

npm להתקין sass

פקודה זו תעדכן את ה package.json קובץ על ידי יצירת חדש תחום תלות, שיכיל את החבילה החדשה של Sass. זה גם ייצור חדש package-lock.json קובץ והתקן sass (בתוספת תלות) לתוך a node_modules מַדרִיך.

הסוגים השונים של קבצי Sass

לקובץ Sass יכולה להיות אחת משתי הרחבות, .סאס אוֹ .scss. ההבדל העיקרי ביניהם הוא שה .scss הקובץ משתמש בסוגרים מתולתלים ופסיקים (בדומה ל-CSS), בעוד ש- .סאס קובץ בונה CSS באמצעות הזחה (בדומה ל-Python). מפתחים מסוימים מעדיפים להשתמש ב- .scss קובץ שכן המבנה שלו קרוב יותר ל-CSS.

דוגמה לקובץ .scss

$primary-color: כחול;
גוף {
 צבע: $primary-color;
 p {
 צבע אדום;
 }
}

דוגמה לקובץ .sass

$primary-color: כחול
גוּף
 צבע: $primary-color
 ע
 צבע אדום

קומפילציה של קובץ Sass ל-CSS

אתה יכול להרכיב קובץ Sass בודד באמצעות ה חצוף תוכנית שורת הפקודה:

sass file.scss > file.css

אתה יכול גם להפעיל Sass על פני כל הקבצים בתוך ספרייה ספציפית:

sass scss: dist/css/

פקודה זו מרכיבה את כל קבצי Sass בתוך scss ספרייה ומאחסן את הקבצים המתקבלים ב dist/css.

אם אתה משתמש ב-npm, אתה יכול להגדיר קיצור דרך נוח להידור Sass באמצעות תסריטים שדה אצלך package.json קוֹבֶץ:

"סקריפטים": {
 "test": "הד \"שגיאה: לא צוינה בדיקה\" && יציאה 1",
 "sass": "sass --watch scss: dist/css/"
 },

תצורה זו משתמשת ב- --שעון אוֹפְּצִיָה. זה שומר על ריצה של Sass ומבטיח שהוא מרכיב מחדש את הקבצים האלה בכל פעם שהם משתנים. עבור כל קובץ, sass יפיק א .css וכן א .css.map קוֹבֶץ.

כדי לבצע את הסקריפט של Sass למעלה, תצטרך לבצע את הפקודה הבאה בטרמינל שלך:

npm run sass

הפעלת הפקודה תיצור פלט דומה לזה:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
הידור scss\main.scss ל- dist\css\main.css.
סאס צופה בשינויים. הקש Ctrl-C כדי לעצור.

משתנים Sass

אתה יכול ליצור משתנים ב-CSS היום, אבל לפני 15 שנה משתני CSS לא היו קיימים, אז תמיכת Sass בהם הייתה בעלת ערך. משתני Sass פועלים כמעט כמו משתני CSS. הם מאחסנים ערכים (כגון צבעים) שבהם אתה מתכוון להשתמש בכל קובץ CSS. אחד היתרונות העיקריים של משתנים הוא שהם מאפשרים לך לעדכן מופעים רבים של ערך על ידי שינויו במקום אחד בלבד.

כל משתנה Sass מתחיל בסימן הדולר, ואחריו כל שילוב של תווים. נסה להפוך את המשתנים שלך לתיאוריים, כמו ה $primary-color דוגמה למעלה. חשוב לציין שמשתנה Sass אינו קומפילציה למשתני CSS. לדוגמה, קובץ ה-scss הזה:

$primary-color: כחול;
גוף {
 צבע: $primary-color;
}

יבצע קומפילציה ל-CSS הבא:

גוף {
 צבע כחול;
}

כפי שניתן לראות מהקובץ למעלה אין משתני CSS. היתרון של משתנים הוא שכל שינוי שנעשה בקובץ Sass יעדכן את קובץ ה-CSS המתאים.

סאס מיקסינס

אם יש לך נכס אחד שאתה רוצה להשתמש בו כמה פעמים במהלך הפרויקט שלך, אז משתנה הוא נהדר. אבל אם יש לך קבוצה של מאפיינים שאתה רוצה להשתמש בהם כיחידה, מיקסין יעשה את העבודה.

כל מיקסין מתחיל ב- @mixin מילת מפתח, ואחריה השם שברצונך להקצות למיקסין. יש לך אפשרות להעביר משתנים ל-mixin כפרמטרים ולהשתמש במשתנים האלה בתוך גוף ה-mixin, כמעט באותו אופן כמו פונקציה.

שימוש במיקסין

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 font-family: 'פרנקלין גותי בינוני', 'אריאל צר', אריאל, sans-serif;
 רקע-צבע: $primary-color;
 צבע: $secondary-color;
}
#בית {
 @include-אור נושא (כחול);
}

הדבר הראשון שאתה עשוי לשים לב אליו בקוד למעלה הוא שהמיקסין מקבל שני טיעונים. אתה יכול להקצות ערכי ברירת מחדל לארגומנטים ולעקוף אותם כאשר אתה כולל אותם.

לאחר שיצרת את המיקסין שלך, תוכל להשתמש בו בכל חלק באתר שלך באמצעות ה @לִכלוֹל מילת מפתח ואחריה שם המיקסין.

קומפילציה של קוד Sass לעיל תיצור את קוד ה-CSS הבא בקובץ היעד שלך:

#בית {
 font-family: "פרנקלין גותי בינוני", "Arial Narrow", Arial, sans-serif;
 צבע רקע: כחול;
 צבע: #2c2c2c;
}

פונקציות Sass

מלבד מילות המפתח השונות, ההבדל העיקרי בין פונקציה למיקסין הוא שפונקציה חייבת להחזיר משהו. ניתן להשתמש בפונקציות Sass כדי לחשב ערכים או לבצע פעולות.

@function add-numbers($num-one, $num-two){
 $sum: 0;
 $sum: $num-one + $num-two;
 @return $sum 
}

פונקציה זו למעלה מקבלת שני מספרים ומחזירה את הסכום שלהם. פונקציות Sass יכולות אפילו להכיל הצהרות if, עבור לולאות והצהרות זרימת בקרה אחרות.

מודולים של Sass

אם היית צריך לכלול את כל המשתנים, המיקסים והפונקציות שלך באותו קובץ, היה לך קובץ Sass ענק בעת יצירת יישומים גדולים. מודולים מספקים דרך לפצל קבצים גדולים לקטנים יותר שמשלבים קבצים מטורפים במהלך ההידור. לדוגמה, אתה יכול לקבל מודול פונקציות ומודול mixin, כל מה שאתה צריך לזכור הוא @להשתמש מילת מפתח.

הנה דוגמה שמראה כיצד ניתן להפריד את המיקסין הקודם לקובץ משלו:

הקובץ mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 font-family: 'פרנקלין גותי בינוני', 'אריאל צר', אריאל, sans-serif;
 רקע-צבע: $primary-color;
 צבע: $secondary-color;
}

הקובץ main.scss

@use 'mixins';
#בית{
 @include mixins.light-theme;
}

כדי לייבא ולהשתמש בקובץ חיצוני כמודול, תצטרך להשתמש ב- @להשתמש מילת מפתח כדי לייבא אותו. לאחר מכן, כדי להשתמש במיקסין ספציפי מהקובץ המיובא, הקדימו את שם המיקסין הספציפי עם שם הקובץ ואחריו נקודה. קומפילציה של הקבצים לעיל יפיק את קוד ה-CSS הבא:

#בית {
 font-family: "פרנקלין גותי בינוני", "Arial Narrow", Arial, sans-serif;
 צבע רקע: לבן;
 צבע: #2c2c2c;
}

השתמש ב-Sass כדי להרחיב ולארגן את ה-CSS שלך

Sass היא הרחבה של התחביר של CSS. זה מאפשר לך לייעל את גיליונות הסגנונות שלך ולנהל אותם בצורה יעילה יותר. אבל עדיין תצטרך לשלוט ב-CSS ובעקרונות עיצוב אתרים כדי ליצור עיצובים יעילים.

מאמר זה מלמד אותך כיצד להתקין ולהשתמש ב-Sass. למדת כיצד ליצור משתני Sass, מיקסים, פונקציות ומודולים. כעת כל מה שנותר לך לעשות הוא ליצור מסמך HTML ולראות את קוד ה-Sass שלך מתעורר לחיים.

8 טיפים וטריקים חיוניים ל-CSS שכל מפתח צריך לדעת

קרא הבא

על הסופר