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

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

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

סרטון MUO של היום גלול כדי להמשיך עם התוכן

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

---

---

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

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

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

 function checkDiscount(price, threshold){ 
    if (price >= threshold){ 
        let discount = 5/100 * price; 
        return `Your discount is $${discount}`; 
    } else { 
        return `Sorry, this item does not qualify for a discount. ` 
    } 
} 

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

 let price = prompt("Enter the item price: ") 
alert(checkDiscount(price, 500)) 

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

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

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

---

---

 p{ 
    background-color: red; 
    width: calc(13px - 4px); 
} 

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

 @width: 10px; 
@height: 20px; 
div{ 
    margin:if((@width > @height), 10px, 20px) 
} 

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

---

---

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

למה אני לא יכול לראות את עצמי בסקייפ

 div { 
    margin: 20px; 
} 

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

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

 @text-color: red; 
@bg-color: boolean(@text-color = red); 

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

 div{ 
    background-color: if(@bg-color,green,yellow); 
} 

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

 div { 
  background-color: green; 
} 

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

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

 replace(string, pattern, replacement, flags) 

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

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

 @string: "Hello"; 
@pattern: "ello"; 
@replacement: "i"; 
 
div::before{ 
    content: replace(@string,@pattern,@replacement) 
} 

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

 div::before { 
  content: "Hi"; 
} 

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

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

 @groceries: "bread", "banana", "potato", "milk"; 

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

 @result: length(@groceries); 

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

 @third-element: extract(@groceries, 3); 

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

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

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

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

 div { 
 margin: 10px 20px 30px 40px; 
}

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

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

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

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

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet/less" type="text/css" href="style.less" /> 
    <title>Document</title> 
</head> 
<body> 
    <div class="container"> 
        <h1> 
        </h1> 
    </div> 
<script src="https://cdn.jsdelivr.net/npm/less" ></script> 
</body> 
</html> 

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

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

 npm install -g less 

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

 lessc style.less style.css 

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

 @container-width: 50rem; 
@container-bg-color: yellow; 

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

 @string: "Hello from the children of planet Earth!"; 
@pattern: "children of planet Earth!"; 
@replacement: "inhabitants of Pluto!"; 
 
.container{ 
    width: @container-width; 
    background-color: @container-bg-color; 
    padding: if(@container-width > 30rem, range(20px, 80px, 20),""); 
    border: solid; 
} 
 
h1:first-child::after{ 
    content: replace(@string,@pattern,@replacement); 
} 

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

 .container { 
  width: 50rem; 
  background-color: yellow; 
  padding: 20px 40px 60px 80px; 
  border: solid; 
} 
h1:first-child::after { 
  content: "Hello from the inhabitants of Pluto!"; 
} 

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

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

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

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