LESS – התקנת סביבת עבודה

הסבר על יצירת סביבת עבודה מסודרת וטובה לעבודה עם LESS - מטא שפה ל-CSS.

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

מה העקרון במטא-שפה? אני כותב CSS בסינטקס של LESS שלא שונה מהסינטקס של CSS אך עם כמה תוספות חשובות כגון פונקציות (mixin), משתנים, קינון ושאר תוספות מאד מאד חשובות שמקלות עלי את החיים. הקובץ הזה, בסיומת less, מקומפל על ידי קומפיילר מבוסס JavaScript אל קבצי CSS רגילים ופשוטים. הקימפול יכול להיות מבוצע בזמן אמת (רעיון גרוע) או בתהליך הפיתוח.
זה נשמע מעט מסורבל – לכתוב קובץ LESS ולקמפל אותו, במיוחד אם התרגלנו פשוט לכתוב CSS רגיל. אבל היתרונות הגלומים ב-LESS: גמישות, קוד מצומצם ואלגנטי, חלוקת קוד הגיונית, פונקציות ומשתנים שווים את הסרבול הקטן הזה ואחרי שמתרגלים – זה הופך לטבע שני. במאמר הזה ובמאמרים שלאחריו אני מדבר על LESS ומלמד איך לעבוד איתו. המאמר הזה יעסוק בהקמת סביבת העבודה והמאמרים הבאים יעסקו בפיצ'רים השונים של LESS: משתנים, פונקציות, קינון ושאר אלמנטים שהופכים כתיבת CSS לפשוטה, קלה ומודרנית.

התקנת LESS סביבת חלונות

יש מספר כלי GUI לקימפול LESS. אחד הפשוטים שבהם נקרא WINLess. הוא ניתן להורדה מכאן. אחרי ההורדה וההתקנה המאד פשוטה, נפעיל אותה ונלחץ עלAdd Folder בצד שמאל למטה:

הוספת תיקית ב-WinLESS
הוספת תיקית ב-WinLESS

אנו נבחר את התיקיה שבה יש את קבצי ה-LESS שלנו. לצורך העניין c:\winamp\www\test\less או אם אתם עובדים עם שרת פיתוח שמחובר עם Samba למחשב שלכם אז N:\www\test\less או כל תיקיה אחרת בהארדיסק שלכם. אנו נלחץ על Refresh folder, נראה את קבצי ה-LESS שיש לנו, נסמן אותם ונלחץ על Compile מנקודה זו והלאה, כל שינוי שנעשה בקובץ ה-LESS מתקמפל באופן אוטומטי אל קובץ ה-CSS. אפשר לראות את זה אם נבחר בלשונית ה-Compiler – נוכל לראות לוג של כל הפעולות של הקימפול שנעשו ולבדוק שהכל קומפל כמו שצריך.

לוג הפעילות של winLESS
לוג הפעילות של winLESS

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

אפל

עבור משתמשי אפל יש את תוכנת LESS.app שאופן ההפעלה שלה דומה למדי לWinLESS.

לינוקס

משתמשי לינוקס צריכים להתקין את node.js על המחשב שלהם. אם יש לכם node.js, המשיכו לשלב הבא, אם לא – התקינו את node.js כך:

sudo apt-get update
 sudo apt-get install git-core curl build-essential openssl libssl-dev
 git clone https://github.com/joyent/node.git
 cd node
 ./configure
 make
 sudo make install
 node -v

אם יש לכם גיט אתם לא צריכים להתקין אותו כמובן….
אחרי ההתקנה של node.js, צריך להתקין את npm, שהוא ה-package manager של node.js, גם זה נעשה די בקלות:

curl https://npmjs.org/install.sh | sudo sh
npm -v
npm install less

עכשיו אפשר להתקין את LESS באמצעות השורה:

npm install less

עוד קצת ומסיימים! עכשיו, כל מה שנותר זה לעדכן את ה-PATH ב-bashrc באופן הבא:

gedit ~/.bashrc
PATH=$PATH:$HOME/node_modules/less/bin
source ~/.bashrc

זהו! less מותקן! אפשר לוודא זאת באמצעות less -v. אנו נפעיל את LESS באופן הבא:

lessc LESSFILE.less > CSSFILE.css

מעכשיו כל שינוי שיעשה ב-LESSFILE.less יקומפל באופן אוטומטי אל CSSFILE.css – פיניטו לה קומדיה.

לסיכום

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

פוסטים נוספים שכדאי לקרוא

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

גלילה לראש העמוד