מהם גיליונות סגנון מדורגים (CSS)?
קרא להלן הסבר מלא כיצד פועלים גיליונות סגנונות מדורגים. אנו מציגים את האפליקציות שלנו בראש העמוד כך שיהיה קל למצוא ולהשתמש בהן. אם אתה קורא את המאמר הזה באמצעות דואר אלקטרוני או עדכון, לחץ על דחוס את ה-CSS שלך.
אלא אם כן אתה מפתח אתרים בפועל, ייתכן שלא תבין לגמרי גיליונות סגנונות מדורגים (CSS). CSS היא שפת גיליון סגנונות המשמשת לתיאור המראה והעיצוב של מסמך שנכתב בו HTML or XML. ניתן להשתמש ב-CSS כדי לציין את הסגנונות עבור אלמנטים שונים כגון גופן, צבע, מרווח ופריסה. CSS מאפשר לך להפריד את הצגת מסמך ה-HTML שלך מהתוכן שלו, מה שמקל על תחזוקה ועדכון הסגנון החזותי של האתר שלך.
מבנה שפת CSS
אל האני בורר הוא אלמנט ה-HTML שברצונך לסגנן, וה- רכוש ו ערך הגדר את הסגנונות שברצונך להחיל על אותו אלמנט:
selector {
property: value;
}
לדוגמה, ה-CSS הבא יעשה הכל <h1>
לרכיבים בדף יש צבע אדום וגודל גופן של 32px:
CSS
h1 {
color: red;
font-size: 32px;
}
תְפוּקָה
כותרת
אתה יכול גם לציין CSS עבור מזהה ייחודי ברכיב:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}
תְפוּקָה
או החל מחלקה על פני מספר אלמנטים:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}
תְפוּקָה
אני רוצה להבליט מילה בתג span.
אתה יכול לכלול CSS במסמך ה-HTML שלך בשלוש דרכים:
- CSS מוטבע, באמצעות ה-
style
תכונה ברכיב HTML - CSS פנימי, באמצעות א
<style>
אלמנט ב<head>
של מסמך ה-HTML שלך - CSS חיצוני, באמצעות קובץ .css נפרד המקושר למסמך ה-HTML שלך באמצעות ה-
<link>
אלמנט ב<head>
של מסמך ה-HTML שלך
CSS רספונסיבי
CSS גמיש להפליא וניתן להשתמש בו כדי להתאים את תצוגת האלמנטים על סמך רזולוציית המסך, כך שתוכל לקבל את אותו HTML אבל לבנות אותו תגובה לרזולוציית המכשיר:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}
דחיסת CSS
אתה יכול לראות בדוגמה למעלה שיש הערה, שאילתת מדיה וסגנונות מרובים המשתמשים ברווחים ובהזנות שורות כדי לארגן את התצוגה של ה-CSS. זהו תרגול מצוין לצמצם או לדחוס את ה-CSS שלך באתר שלך כדי להפחית את גדלי הקבצים, ולאחר מכן, את הזמן שלוקח לבקש ולעבד את הסגנון שלך. זה לא סכום קטן... אתה יכול לראות מעל 50% חיסכון בכמה מהדוגמאות למעלה.
תצורות שרת רבות מציעות כלים שידחסו אוטומטית את ה-CSS תוך כדי תנועה וישמרו את הקובץ הממוזער כך שלא תצטרכו לעשות זאת באופן ידני.
מה זה SCSS?
חצוף CSS (SCSS) הוא מעבד קדם CSS המוסיף פונקציונליות ותחביר נוספים לשפת ה-CSS. זה מרחיב את היכולות של CSS על ידי מתן אפשרות שימוש במשתנים, מיקסינים, פונקציות ותכונות אחרות שאינן זמינות ב-CSS רגיל.
יתרונות SCSS
- תחזוקה משופרת: בעזרת שימוש במשתנים, אתה יכול לאחסן ערכים במקום אחד ולעשות בהם שימוש חוזר בכל גיליון הסגנונות שלך, מה שמקל על תחזוקה ועדכון של הסגנונות שלך.
- ארגון טוב יותר: בעזרת מיקסים, אתה יכול לקבץ ולעשות שימוש חוזר בקבוצות של סגנונות, מה שהופך את גיליון הסגנונות שלך למאורגן יותר וקל יותר לקריאה.
- פונקציונליות מוגברת: SCSS כולל תכונות רבות שאינן זמינות ב-CSS סטנדרטי, כגון פונקציות, מבני בקרה (למשל if/else) ופעולות אריתמטיות. זה מאפשר עיצוב דינמי ואקספרסיבי יותר.
- ביצועים טובים יותר: קבצי SCSS מורכבים לתוך CSS, מה שיכול לשפר את הביצועים על ידי הפחתת כמות הקוד שצריך לנתח על ידי הדפדפן.
חסרונות SCSS
- עקומת למידה: ל-SCSS יש תחביר שונה מ-CSS רגיל, ותצטרך ללמוד את התחביר החדש הזה לפני שתוכל להשתמש בו ביעילות.
- מורכבות נוספת: למרות ש-SCSS יכול להפוך את גיליון הסגנונות שלך למאורגן יותר וקל יותר לתחזוקה, הוא יכול גם להכניס מורכבות נוספת לבסיס הקוד שלך, במיוחד אם אינך מכיר את התכונות והתחביר החדשים.
- כלי עבודה: כדי להשתמש ב-SCSS, תזדקק למהדר כדי לתרגם את קוד ה-SCSS שלך ל-CSS. זה דורש הגדרה וכלים נוספים, שיכולים להוות מחסום כניסה עבור מפתחים מסוימים.
בדוגמה זו למטה, קוד ה-SCSS עושה שימוש במשתנים לאחסון ערכים ($primary-color
ו $font-size
) שניתן לעשות בהם שימוש חוזר בכל גיליון הסגנונות. קוד ה-CSS שנוצר מקוד SCSS זה שווה ערך, אך אינו כולל את המשתנים. במקום זאת, הערכים של המשתנים משמשים ישירות ב-CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}
תכונה נוספת של SCSS המודגמת בדוגמה זו היא סגנונות מקוננים. בקוד SCSS, ה h1
סגנונות מקוננים בתוך ה- body
סגנונות, דבר שאינו אפשרי ב-CSS רגיל. כאשר קוד ה-SCSS מורכב, הסגנונות המקוננים מורחבים לסגנונות נפרדים בקוד ה-CSS.
בסך הכל, SCSS מספק יתרונות רבים על פני CSS רגיל, אך חשוב לקחת בחשבון את הפשרות ולבחור את הכלי המתאים לפרויקט שלך בהתבסס על הצרכים והאילוצים שלך.