מהו Stylus CSS וכיצד משתמשים בו?

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

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

מהו מעבד קדם CSS?

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

מעבדי קדם CSS כמו Sass, למשל, מציעים תכונות מיוחדות כמו לולאות, מיקסים, בוררים מקוננים והצהרות if/else. תכונות אלו מקלות על תחזוקת קוד ה-CSS שלך, במיוחד בצוותים גדולים.

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

איך Stylus CSS עובד

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

npm להתקין חרט

אוֹ:

חוט להוסיף חרט

כל קובץ Stylus CSS מסתיים ב-a

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

חרט .

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

stylus --css style.css style.styl

תחביר ובוררי הורים ב-Stylus CSS

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

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

.מְכוֹלָה
שולים: 10פיקסלים

בלוק הקוד שלמעלה מבצע קומפילציה ל-CSS הבא:

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

בדיוק כמו במעבדי קדם CSS כמו Less, אתה יכול להפנות לבורר הורים עם ה- & אופי:

לַחְצָן
צֶבַע: לבן;
 &:לְרַחֵף
צֶבַע: צהוב;

מה שמתחבר ל:

לַחְצָן {
צֶבַע: #fff;
}
לַחְצָן:לְרַחֵף {
צֶבַע: #ff0;
}

כיצד להשתמש במשתנים ב-Stylus CSS

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

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

bg-color = שָׁחוֹר

כעת תוכל להשתמש במשתנה ב- .סטייל קובץ כזה:

div
צבע רקע: bg-color

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

div {
צבע רקע: #000;
}

אתה יכול להגדיר משתנה null עם סוגריים. לדוגמה:

משתנה-ריק = ()

אתה יכול להפנות לערכי מאפיינים אחרים באמצעות ה @ סֵמֶל. לדוגמה, אם ברצונך להגדיר את הגובה של div לחצי מהרוחב שלו, תוכל לעשות את הפעולות הבאות:

רוחב אלמנט = 563פיקסלים
div
רוֹחַב: רוחב אלמנט
גוֹבַה: (רוחב אלמנט / 2)

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

div
רוֹחַב: 563פיקסלים
גוֹבַה: (@רוֹחַב / 2)

בבלוק קוד זה, ה @ סמל מאפשר לך להתייחס למציאות רוֹחַב נכס על div. ללא קשר לגישה שתבחר, כשאתה מרכיב את ה .סטייל קובץ, אתה אמור לקבל את ה-CSS הבא:

div {
רוֹחַב: 563פיקסלים;
גוֹבַה: 281.5 פיקסלים;
}

פונקציות ב-Stylus CSS

ניתן ליצור פונקציות המחזירות ערכים ב-Stylus CSS. נניח שאתה רוצה להגדיר את יישור טקסט תכונה של div ל"מרכז" אם ה רוֹחַב גדול מ-400 פיקסלים, או "שמאל" אם רוֹחַב הוא פחות מ-400 פיקסלים. אתה יכול ליצור פונקציה שמטפלת בהיגיון הזה.

יישר למרכז(נ)
אם (נ > 400)
 'מֶרְכָּז'
אַחֵראם (נ < 200)
 'שמאלה'
div {
רוֹחַב: 563פיקסלים
יישור טקסט: יישר למרכז(@רוֹחַב)
גוֹבַה: (@רוֹחַב / 2)
}

בלוק קוד זה קורא ל- יישר למרכז פונקציה, עובר את רוֹחַב ערך הנכס על ידי הפניה אליו עם ה- @ סֵמֶל. ה יישר למרכז הפונקציה בודקת אם הפרמטר שלה, נ, גדול מ-400, ומחזיר "מרכז" אם כן. אם נ הוא פחות מ-200, הפונקציה מחזירה "שמאל".

כאשר המהדר פועל, הוא אמור להפיק את הפלט הבא:

div {
רוֹחַב: 563פיקסלים;
יישור טקסט: 'מֶרְכָּז';
גוֹבַה: 281.5 פיקסלים;
}

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

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

להחסיר(ב:30 פיקסלים, א:10px)/*-20px*/

מתי להשתמש במעבד קדם CSS

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

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