קינון CSS מקורי יכול לפשט את קוד ה-CSS שלך ולשפר את חוויית הקידוד הכוללת שלך.
היסטורית, CSS הייתה שפה שקשה לעבוד איתה. מעבדי קדם CSS הקלו על העבודה עם CSS וגם סיפקו תכונות נוספות כמו לולאות, מיקסים ועוד. עם השנים, ה-CSS הפך ליכולת יותר ואימצה חלק מהתכונות שהוצגו במקור על ידי מעבדי CSS מראש. תכונה אחת כזו היא "סטיילינג מקונן".
סגנון מקונן מאפשר למפתחים לקנן כללי CSS אחד בתוך השני, המשקפים את מבנה ה-HTML. זה מביא לקוד מאורגן וקריא יותר, מכיוון שהקשר בין רכיבי HTML וסגנונותיהם התואמים ניכר חזותית.
סטיילינג מקונן: הדרך הישנה
סטיילינג מקונן הוא תכונה זמינה ברבים מעבדי קדם CSS כמו Sass, סטיילוס ופחות CSS. למרות שהתחביר עשוי להיות שונה בין מעבדי הקדם הללו, הרעיון הבסיסי נשאר עקבי. אם אתה רוצה לסגנן את כל h1 אלמנטים בא div עם שם הכיתה של מְכוֹלָה, ב-CSS רגיל, היית כותב:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
במעבד קדם CSS כמו Less CSS, אתה מיישם סגנון מקונן כך:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
בלוק הקוד שלמעלה משיג את אותן תוצאות כמו יישום ה-CSS הרגיל, אך מקל על כל מפתח שקורא את הקוד להבין מה קורה. תחושת ה"היררכיה" הזו הייתה אחת מנקודות המכירה הגדולות ביותר של מעבדי קדם CSS.
ניתן לקנן את עץ הקינון לכל עומק ללא הגבלות, אך חיוני להיות זהיר, מכיוון שקינון עמוק מדי עלול להוביל למילוליות הקוד.
Native Nested Styling ב-CSS
לא כל הדפדפנים כוללים תמיכה בעיצוב מקורי מקורי. ה אני יכול להשתמש... אתר האינטרנט יכול לעזור לך לבדוק אם דפדפן היעד שלך תומך בתכונה זו.
סגנון מקונן מקורי ב-CSS עובד בדומה למעבדי קדם CSS, כלומר אפשר לקנן כל בורר בתוך אחר. אבל יש הבדל מרכזי אחד שכדאי לשים לב אליו. תסתכל על בלוק הקוד למטה:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
בבלוק הקוד למעלה, ה-div עם שם המחלקה מְכוֹלָה בעל צבע רקע אדום. הסטיילינג עבור h1 האלמנט טמון ב .מְכוֹלָה לַחסוֹם. זֶה h1 לאלמנט יש צבע צהוב. כאשר אתה מפעיל את הקוד הזה בדפדפן, ייתכן שתבחין במשהו לא בסדר. הדפדפן מחיל כהלכה צבע רקע אדום על מְכוֹלָה div, אבל ה h1 אין את הסגנון המתאים.
הסיבה לכך היא שסטיילינג מקונן עובד קצת אחרת ב-CSS בהשוואה למעבדי קדם CSS כמו Less. לא ניתן להפנות ישירות לרכיב HTML בעץ מקונן. כדי לתקן זאת, עליך להשתמש באמפרסנד (&) כפי שמוצג להלן:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
בגוש הקוד למעלה, & פועל כהפניה לבורר האב. לשים את האמפרסנד לפני ה h1 אלמנט צריך ליידע את הדפדפן שאתה ממקד לכל הילדים h1 אלמנטים על מְכוֹלָה div. כאשר אתה מפעיל את הקוד בדפדפן, אתה אמור לראות את הדברים הבאים:
מאז & הוא הסמל המשמש להפניה לאלמנט אב, זה בהחלט אפשרי למקד לפסאודו-מחלקות ופסאודו-אלמנטים של אלמנט בצורה הבאה:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
לפני היישום של סגנון מקונן CSS, אם התכוונת להחיל סגנונות באופן מותנה, בהתאם לרוחב הדפדפן, היית צריך לנקוט בשיטה כמו הבאה:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
כאשר הדפדפן מעבד את הדף, הוא קובע את הצבע של ע אלמנט המבוסס על רוחב הדפדפן. אם רוחב הדפדפן עולה על 750 פיקסלים, הוא משתמש בצבע אפור; אחרת, הוא מחיל את צבע ברירת המחדל (שחור).
יישום זה עובד מצוין, אבל כפי שאתה יכול לדמיין, דברים יכולים להיות די מילוליים במהירות, במיוחד כאשר אתה צריך ליישם סגנונות שונים המבוססים על כללים מסוימים. עכשיו אפשר לקנן שאילתות מדיה ישירות בגוש הסגנון של אלמנט.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
בלוק הקוד הזה עושה בעצם את אותו הדבר כמו הקודם, אבל הוא מגיע עם היתרון של קל להבנה. רק על ידי התבוננות בשאילתת המדיה וברכיב האב המקנן, תוכל לדעת כיצד הדפדפן יחיל את הסגנונות המתאימים כאשר התנאים שהוגדרו מתקיימים.
עיצוב אתר עם סגנונות מקוננים של CSS
הגיע הזמן ליישם את כל מה שלמדת עד כה על ידי בניית אתר פשוט ומינוף תכונת הסגנון המקוננת ב-CSS. צור תיקיה וקרא לה איך שאתה רוצה. בתיקייה זו, צור קובץ index.htm וכן א style.css קוֹבֶץ.
בתוך ה index.htm קובץ, הוסף את קוד ה-boilerplate הבא:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
בלוק הקוד שלמעלה מגדיר את הסימון עבור אתר חדשות מדמה. לאחר מכן, פתח את style.css קובץ והוסיפו את הקוד הבא:
.container {
display: flex;
gap: 25px;@media(max-width: 750px) {
flex-direction: column;
}.article{
width:90%;
}& div:nth-child(3) {
text-align: justify;
}& span {
color: rgb(67, 66, 66);&:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
בלוק הקוד שלמעלה מעצב את האתר כולו עם סגנון מקונן של CSS. ה .מְכוֹלָה בורר פועל כעומק השורש. אתה יכול להתייחס לבורר זה באמצעות ה- & סֵמֶל. כאשר אתה מפעיל את הקוד בדפדפן, אתה אמור לראות את הדברים הבאים:
האם אתה עדיין צריך מעבד קדם CSS?
עם הצגת סגנונות מקוננים ל-CSS מקורי, ייתכן שמעבדי CSS מקדימים ייראו מיותרים. עם זאת, חשוב לזכור שמעבדי קדם CSS מציעים יותר מסתם עיצוב מקונן. הם מספקים תכונות כמו לולאות, מיקסים, פונקציות ועוד. בסופו של דבר, האם להשתמש במעבד קדם CSS או לא תלוי במקרה השימוש הספציפי שלך ובהעדפות האישיות.
