כיצד להשתמש בפונקציות בפחות CSS

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

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

מהן פונקציות ולמה הן חשובות?

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

הם מקלים על הפחתת קוד כפול בתוך תוכנית. לדוגמה, נניח שיש לך תוכנית שמחשבת את ההנחה לפי המחיר שהמשתמש מזין. ב שפה כמו JavaScript, אתה יכול ליישם את זה כך:

פוּנקצִיָהcheckDiscount(מחיר, סף){
אם (מחיר >= סף){
לתת הנחה = 5/100 * מחיר;
לַחֲזוֹר`ההנחה שלך היא $${discount}`;
 } אַחֵר {
לַחֲזוֹר`מצטערים, פריט זה אינו זכאי להנחה. `
 }
}

אז אתה יכול לקרוא לפונקציה ולהעביר את מחיר וה מפתן.

לתת מחיר = הנחיה("הזן את מחיר הפריט:")
התראה (בדוק דיסקונט (מחיר, 500))

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

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

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

ע{
צבע רקע: אָדוֹם;
רוֹחַב: calc(13פיקסלים- 4פיקסלים);
}

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

@רוֹחַב: 10 פיקסלים;
@גוֹבַה: 20 פיקסלים;
div{
שולים:אם((@רוֹחַב > @גובה), 10 פיקסלים, 20 פיקסלים)
}

בבלוק הקוד למעלה, המהדר Less בודק אם המשתנה רוֹחַב (מוגדר על ידי @ סמל) גדול מהמשתנה גוֹבַה. אם התנאי אמת, הפונקציה מחזירה את הערך הראשון אחרי התנאי (10px). אחרת, הפונקציה מחזירה את הערך השני (20px).

לאחר ההידור, פלט ה-CSS אמור להיראות בערך כך:

div {
שולים: 20פיקסלים;
}

כיצד להשתמש בבוליאנית בפחות

בוליאני הוא משתנה שיש לו שני ערכים אפשריים: נָכוֹן אוֹ שֶׁקֶר. עם ה בוליאן() function ב-Less, אתה יכול לאחסן את הערך האמיתי או השקר של ביטוי במשתנה לשימוש מאוחר יותר. ככה זה עובד.

@צבע טקסט: אדום;
@bg-color: boolean(@text-color = אדום);

בבלוק הקוד למעלה, המהדר Less בודק אם צבע טקסט זה אדום. אז ה bg-color משתנה מאחסן את הערך.

div{
צבע רקע: אם(@bg-color,ירוק צהוב);
}

בלוק הקוד שלמעלה מתחבר למשהו כזה:

div {
צבע רקע: ירוק;
}

החלפת טקסט בתוך מחרוזת עם הפונקציה replace()

התחביר עבור ה החלף() הפונקציה נראית כך:

החלף(חוּט, תבנית, תַחֲלִיף, דגלים)

חוּט מייצג את המחרוזת שברצונך לחפש ולהחליף בה. תבנית היא המחרוזת שיש לחפש. תבנית יכול להיות גם ביטוי רגולרי, אבל זה בדרך כלל מחרוזת. לאחר התאמה מוצלחת, מהדר Less CSS מחליף את זה תבנית עם ה תַחֲלִיף.

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

@חוּט: "שלום";
@תבנית: "שלום";
@תַחֲלִיף: "אני";
div::לפני{
תוֹכֶן: החלף(@חוּט,@תבנית,@תַחֲלִיף)
}

בלוק הקוד שלמעלה אמור להוביל לתוצאות הבאות לאחר ההידור:

div::לפני {
תוֹכֶן: "היי";
}

רשימת פונקציות בפחות CSS

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

@מצרכים: "לחם", "בננה", "תפוח אדמה", "חלב";

אתה יכול להשתמש ב אורך() פונקציה להערכת מספר האלמנטים ברשימה.

@תוֹצָאָה: length(@groceries);

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

@אלמנט שלישי:extract(@groceries, 3);

בניגוד לשפות תכנות רגילות שבהן אינדקס הרשימה מתחיל מ-0, אינדקס ההתחלה של רשימה בפחות CSS הוא תמיד 1.

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

div {
 margin: range (10px, 40px, 10);
}

בלוק הקוד שלמעלה צריך להדר עד הבא:

div {
 שוליים: 10px 20px 30px 40px;
}

כפי שאתה יכול לראות, מהדר Less CSS מתחיל מ-10px, ומגדיל את הערך הקודם ב-10, עד שהוא מגיע למיקום הקצה (40px).

בניית אתר פשוט עם פחות פונקציות CSS

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

פתח את ה index.htm הקובץ והוסיפו את קוד ה-HTML הבא.

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<קישורrel="גיליון סגנונות/פחות"סוּג="טקסט/css"href="חסר סגנון" />
<כותרת>מסמךכותרת>
רֹאשׁ>
<גוּף>
<divמעמד="מְכוֹלָה">
<h1>
h1>
div>
<תַסרִיטsrc=" https://cdn.jsdelivr.net/npm/less" >תַסרִיט>
גוּף>
html>

בבלוק הקוד למעלה, יש הורה "מְכוֹלָה"div עם ריק h1 אֵלֵמֶנט. ה src תכונה על תַסרִיט תג מצביע על הנתיב ל- Less CSS Compiler.

בלי זה תַסרִיט תג, הדפדפן לא יוכל להבין את הקוד שלך. לחלופין, אתה יכול להתקין פחות CSS במחשב שלך באמצעות מנהל חבילות צומת (NPM), על ידי הפעלת הפקודה הבאה בטרמינל:

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

בכל פעם שאתה מוכן להדר את .פָּחוֹת קובץ, פשוט הפעל את הפקודה למטה, וודא שאתה מציין את הקובץ שאליו המהדר צריך לכתוב את הפלט.

lessc style.less style.css

בתוך ה סגנון. פחות קובץ, צור שני משתנים כלומר: רוחב מיכל ו מיכל-bg-color כדי לייצג את הרוחב וצבע הרקע של "מְכוֹלָה"div בהתאמה.

@container-width: 50 רם;
@container-bg-color: צהוב;

לאחר מכן, צור שלושה משתנים, כלומר: חוּט, תבנית, ו תַחֲלִיף. לאחר מכן הוסף את הסגנונות עבור "מְכוֹלָה"div וה h1 אֵלֵמֶנט.

@חוּט: "שלום מילדי כדור הארץ!";
@תבנית: "ילדי כדור הארץ!";
@תַחֲלִיף: "תושבי פלוטו!";
.מְכוֹלָה{
רוֹחַב: @container-width;
צבע רקע: @container-bg-color;
ריפוד: אם(@container-width > 30 רם, טווח(20 פיקסלים, 80 פיקסלים, 20),"");
גבול: מוצק;
}
h1:ילד ראשון::לאחר{
תוֹכֶן: החלף(@חוּט,@תבנית,@תַחֲלִיף);
}

בבלוק הקוד למעלה, ה- טווח() הפונקציה מגדירה את ריפוד נכס על "מְכוֹלָה"div. המהדר Less צריך לקמפל את סגנון. פחות קובץ לתוך הבא:

.מְכוֹלָה {
רוֹחַב: 50rem;
צבע רקע: צהוב;
ריפוד: 20פיקסלים 40פיקסלים 60פיקסלים 80פיקסלים;
גבול: מוצק;
}
h1:ילד ראשון::לאחר {
תוֹכֶן: "שלוםמהתושביםשֶׁלפלוטו!";
}

כאשר אתה פותח את index.htm קובץ בדפדפן, זה מה שאתה צריך לראות:

שפר את הפרודוקטיביות שלך עם מעבדי CSS Preprocessors

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

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