אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » LESS » LESS – התקנת סביבת עבודה

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

רן בר-זיק פברואר 24, 2013 7:53 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
LESS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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