מה זה פחות CSS ואיך משתמשים בו?

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

Less (Leaner Style Sheets) היא הרחבה של CSS עם תכונות רבות עוצמה. אם אתה יודע CSS, אז ללמוד Less זה קל כי התחביר של Less דומה מאוד.

כיצד להתקין פחות

אתה יכול להתקין פחות עם מנהל חבילות JavaScript, NPM על ידי ריצה:

npm להתקין פחות -g

לאחר ההתקנה, אתה יכול לעשות קומפילציה .פָּחוֹת קבצים ל .css משתמש ב lessc פקודה. לדוגמה, הפקודה הבאה מבצעת קומפילציה סגנון. פחות ומוציא את התוצאות ב-a style.css קוֹבֶץ.

lessc style.less style.css

משתנים בפחות

בניגוד CSS רגיל, המשתמש באופרטור "--" כדי להגדיר משתנים, Less מגדיר משתנים באמצעות הסמל "@". לדוגמה:

@רוֹחַב:40 פיקסלים;
@גוֹבַה:80 פיקסלים;

בלוק הקוד פשוט יוצר שני משתנים, רוחב וגובה שמכילים שני ערכים בהתאמה: 40px ו-80px. מקובל לקחת ערכים נפוצים ב-CSS ולאחסן אותם במשתנה. זה מקל על שינוי ערכים אלה מכיוון שיש רק מקור שליטה אחד.

כך תוכל להשתמש במשתנים ב-Less. ליצור index.htm קובץ והוסף את קוד ה-boilerplate הבא:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאhttp-equiv="תואם X-UA"תוֹכֶן="IE=edge">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<קישורrel="גיליון סגנונות"href="style.css">
<כותרת>שימוש בפחות CSSכותרת>
רֹאשׁ>
<גוּף>
<div>
 שלום מילדי כדור הארץ!
div>
גוּף>
html>

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

@רוֹחַב:400 פיקסלים;
@גוֹבַה:400 פיקסלים;
@vertical-center: מֶרְכָּז;
@txt-white: לבן;
@bg-red: rgb(220, 11, 11);
@font-40:40 פיקסלים;
div {
רוֹחַב: @רוֹחַב;
גוֹבַה: @גוֹבַה;
לְהַצִיג: להגמיש;
צֶבַע: @txt-לבן;
צבע רקע: @bg-red;
גודל גופן: @font-40;
}

עכשיו, כאשר אתה יכול להרכיב את .פָּחוֹת קובץ ל .css משתמש ב lessc פקודה:

lessc style.less style.css

ה-CSS המהודר אמור להיראות כך:

div {
רוֹחַב: 400פיקסלים;
גוֹבַה: 400פיקסלים;
לְהַצִיג: לְהַגמִישׁ;
צֶבַע: לבן;
צבע רקע: #dc0b0b;
גודל גופן: 40פיקסלים;
}

כאשר אתה פותח את הדפדפן שלך, זה מה שאתה צריך לראות:

יש הרבה יותר שאתה יכול לעשות עם משתנים ב-Less, כמו אינטרפולציה המאפשרת לך להשתמש במשתנים כשמות בוררים, כתובות URL ועוד. להלן דוגמה כיצד ליישם אינטרפולציה משתנים:

@ בורר מותאם אישית: מְכוֹלָה;
.@{custom-selector} {
ריפוד: 10 פיקסלים;
שולים: 10 פיקסלים;
גבול: מוצק 10 פיקסלים;
}

בלוק הקוד שלמעלה משתמש ב- @{...} סעיף לשימוש במשתנה כבורר. לאחר הידור, הקוד יביא לתוצאות הבאות:

.מְכוֹלָה{
ריפוד: 10פיקסלים;
שולים: 10פיקסלים;
גבול: מוצק 10פיקסלים;
}

פעולות אריתמטיות בפחות

Less מספקת גם תמיכה בפעולות אריתמטיות כמו חיבור, חיסור, חילוק וכפל. פעולות אלו עובדות עם קבועים, ערכים ומשתנים.

@variable-1:5 פיקסלים;
// כפל פעולת בין משתנה וקבוע
@variable-2:@variable-1 * 2
// פעולת הוספה בין ערך למשתנה.
@variable-3:10 פיקסלים + @variable-2

כיצד להשתמש במיקסינים

Mixins מאפשר לך לעשות שימוש חוזר בסגנונות (או בקוד CSS) בכל גיליון הסגנונות. אַחֵר הרחבות CSS כמו Sass מציעים גם Mixins. כדי להמחיש כיצד mixins עובדים ב-Less, צור index.htm והוסף את הקוד הבא:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאhttp-equiv="תואם X-UA"תוֹכֶן="IE=edge">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<קישורrel="גיליון סגנונות"href="style.css">
<כותרת>שימוש בפחות CSSכותרת>
רֹאשׁ>
<גוּף>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 דולורום! התנדב quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
div>
<ע>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 דולורום! התנדב quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
ע>
<ע>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 דולורום! התנדב quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
ע>
גוּף>
html>

לאחר מכן, צור א סגנון. פחות קובץ והוסף את השורות הבאות:

.טקסט לדוגמה() {
צבע רקע: צהוב;
}
.מכתב ראשון() {
צבע רקע: אדום;
צֶבַע: לבן;
גודל גופן: 30 פיקסלים;
}
ע {
.טקסט לדוגמה();
}
ע::מכתב ראשון {
.מכתב ראשון();
}

בבלוק הקוד למעלה, יש שתי מחלקות mixin: .טקסט לדוגמה ו .מכתב ראשון. כאשר אתה רוצה להשתמש במיקסין בחלק אחר של גיליון הסגנונות, פשוט עיין בו בשם עם סוגריים בסוף: ‎.mixin(). בדפדפן, אתה אמור לראות משהו כזה:

סטייל קינון בפחות

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

divע {
צֶבַע: אָדוֹם;
}
div {
צֶבַע: ירוק
}

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

div {
צֶבַע: ירוק;
ע {
צֶבַע: אדום;
 }
}

לא רק שקל יותר לעטוף את הראש, זה גם הופך את הקוד לתחזוקה יותר. קל יותר להתייחס לבוררי הורים עם פחות & מַפעִיל. לדוגמה:

לַחְצָן {
צבע רקע: כחול;
גבול: אף אחד;
&:לְרַחֵף {
צבע רקע: אפור;
שינוי צורה: קנה מידה(1.2);
 }
}

בלוק הקוד שלמעלה יגרום לקוד ה-CSS הבא בעת הידור:

לַחְצָן {
צבע רקע: כְּחוֹל;
גבול: אף אחד;
}
לַחְצָן:לְרַחֵף {
צבע רקע: אפור;
שינוי צורה: סוּלָם(1.2);
}

הבנת היקף ופונקציות בפחות

כמו שפות תכנות רגילות, למשתנים יש את היקף הבלוק שבו אתה מגדיר אותם. כדי להמחיש זאת, צור חדש index.htm הקובץ, והוסיפו את קוד ה-boilerplate הראשון של HTML שסופק קודם לכן. לאחר מכן הוסף את הבלוק הבא ב- גוּף תָג:

<divמעמד="דיב חיצוני">
 Div חיצוני צריך להיות אדום.
<br />
<לְהַקִיףמעמד="div inner">
 div פנימי צריך להיות ירוק.
לְהַקִיף>
div>

בתוך ה סגנון. פחות קובץ, הוסף את השורות הבאות:

@bg-color: אָדוֹם;
גוּף {
גודל גופן: 40 פיקסלים;
צֶבַע: לבן;
שולים: 20 פיקסלים;
}
.inner-div {
@bg-color: ירוק;
צבע רקע: @bg-color;
}
.outer-div {
צבע רקע: @bg-color;
}

ה פנימי-div בלוק מגדיר מחדש את bg-color משתנה, בהיקף רק לאותו בלוק. אז הצבע הירוק חל רק על המעמד הזה ואינו משפיע על הגלובלי bg-color מִשְׁתַנֶה. כאשר אתה מקמפל ופותח את התוצאה בדפדפן, זה מה שאתה צריך לראות:

Less מספקת גם פונקציות שימושיות שיכולות להיות מועילות בתרחישים מסוימים. לדוגמה, אם אתה רוצה להגדיר סגנון רק אם מתקיים תנאי מסוים, אתה יכול לעשות את זה עם אם פוּנקצִיָה. לפונקציה זו יש את התחביר הבא:

אם((תנאי), ערך1, ערך2)

הקוד חוזר ערך1 אם התנאי מתקיים ו ערך2 אחרת. הנה דוגמא:

@var1:20 פיקסלים;
@var2:20 פיקסלים;
div {
ריפוד: אם((@var1 = @var2), 10 פיקסלים, 20 פיקסלים);
}

בלוק הקוד שלמעלה אמור להוביל ל-CSS הבא בעת הידור:

div {
ריפוד: 10פיקסלים;
}

עשה יותר עם פחות והרחבות CSS אחרות

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

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