לייענען אונטן פֿאַר אַ פול דערקלערונג פון ווי קאַסקיידינג סטילעשעעץ אַרבעט. מיר ווייַזן אונדזער אַפּפּס אין די שפּיץ פון די בלאַט אַזוי אַז עס איז גרינג צו געפֿינען און נוצן. אויב איר לייענען דעם אַרטיקל דורך E- בריוו אָדער קאָרמען, גיט דורך צו קאָמפּרעס דיין CSS.
סייַדן איר טאַקע דעוועלאָפּינג זייטלעך, איר קען נישט גאָר פֿאַרשטיין קאַסקיידינג סטיל שיץ (קסס). CSS איז אַ סטילעשעט שפּראַך געניצט צו באַשרייַבן די אויסזען און פאָרמאַטטינג פון אַ דאָקומענט געשריבן אין HTML or קסמל. CSS קענען זיין געוויינט צו ספּעציפיצירן די סטיילז פֿאַר פאַרשידן עלעמענטן אַזאַ ווי שריפֿט, קאָליר, ספּייסינג און אויסלייג. CSS אַלאַוז איר צו צעטיילן די פּרעזענטירונג פון דיין HTML דאָקומענט פון זיין אינהאַלט, וואָס מאכט עס גרינגער צו טייַנען און דערהייַנטיקן די וויזשאַוואַל נוסח פון דיין וועבזייטל.
CSS שפּראַך סטרוקטור
די סעלעקטאָר איז דער HTML עלעמענט איר ווילן צו סטיל, און די פאַרמאָג און ווערט דעפינירן די סטיילז איר ווילן צו צולייגן צו דעם עלעמענט:
selector {
property: value;
}פֿאַר בייַשפּיל, די פאלגענדע CSS וועט מאַכן אַלע <h1> עלעמענטן אויף אַ בלאַט האָבן אַ רויט קאָליר און אַ שריפֿט גרייס פון 32 פּקס:
קסס
h1 {
color: red;
font-size: 32px;
}רעזולטאַט
כעדינג
איר קענט אויך ספּעציפיצירן CSS פֿאַר אַ יינציק שייַן אויף אַן עלעמענט:
קסס
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}רעזולטאַט
אָדער צולייגן אַ קלאַס איבער קייפל עלעמענטן:
קסס
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}רעזולטאַט
איך ווילן צו הויכפּונקט אַ וואָרט אין די שפּאַן קוויטל.
איר קענען אַרייַננעמען CSS אין דיין HTML דאָקומענט אין דריי וועגן:
- ינלינע CSS, ניצן די
styleאַטריביוט אויף אַ HTML עלעמענט - אינערלעכער CSS, ניצן אַ
<style>עלעמענט אין די<head>פון דיין HTML דאָקומענט - פונדרויסנדיק 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 אויף דיין פּלאַץ צו רעדוצירן טעקע סיזעס און דערנאָך די צייט עס נעמט צו בעטן און מאַכן דיין סטילינג. עס איז נישט אַ קליין סומע ... איר קענען זען איבער 50% סייווינגז אויף עטלעכע פון די ביישפילן אויבן.
פילע סערווער קאַנפיגיעריישאַנז פאָרשלאָגן מכשירים וואָס אויטאָמאַטיש קאָמפּרעס CSS אויף די פליען און קאַש די מיניפיעד טעקע אַזוי אַז איר טאָן ניט האָבן צו טאָן דאָס מאַניואַלי.
וואָס איז SCSS?
סאַסי קסס (SCSS) איז אַ CSS פּרעפּראָסעססאָר וואָס מוסיף נאָך פאַנגקשאַנאַליטי און סינטאַקס צו די CSS שפּראַך. עס יקסטענדז די קייפּאַבילאַטיז פון CSS דורך אַלאַוינג די נוצן פון וועריאַבאַלז, מיקסינס, פאַנגקשאַנז און אנדערע פֿעיִקייטן וואָס זענען נישט בנימצא אין נאָרמאַל CSS.
SCSS אַדוואַנטאַגעס
- ימפּרוווד מאַינטאַינאַביליטי: מיט די נוצן פון וועריאַבאַלז, איר קענען קראָם וואַלועס אין איין אָרט און רייוז זיי איבער דיין סטילעשעעט, מאכן עס גרינגער צו טייַנען און דערהייַנטיקן דיין סטיילז.
- בעסער אָרגאַניזאַציע: מיט מיקסינס, איר קענען גרופּע און רייוז די סטיילז פון סטיילז, וואָס מאכט דיין סטיילז מער אָרגאַניזירט און גרינגער צו לייענען.
- געוואקסן פאַנגקשאַנאַליטי: SCSS כולל פילע פֿעיִקייטן ניט בנימצא אין נאָרמאַל קסס, אַזאַ ווי פאַנגקשאַנז, קאָנטראָל סטראַקטשערז (למשל אויב / אַנדערש), און אַריטמעטיק אַפּעריישאַנז. דעם אַלאַוז פֿאַר מער דינאַמיש און יקספּרעסיוו סטילינג.
- בעסער פאָרשטעלונג: 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 סטיילז, וואָס איז ניט מעגלעך אין נאָרמאַל קסס. ווען די SCSS קאָד איז קאַמפּיילד, די נעסטעד סטיילז זענען יקספּאַנדיד אין באַזונדער סטיילז אין די CSS קאָד.
קוילעלדיק, SCSS גיט פילע אַדוואַנטידזשיז איבער נאָרמאַל CSS, אָבער עס איז וויכטיק צו באַטראַכטן די האַנדל-אָפס און קלייַבן די רעכט געצייַג פֿאַר דיין פּרויעקט באזירט אויף דיין באדערפענישן און קאַנסטריינץ.
איך געפונען אן אנדער גרויס פּאָזיציע אין בלאָגגינג פּראָ אויף CSS אָפּטימיזאַטיאָן.