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