עבודה ביעילות עם טיפים פחות וכלים

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

ובכן, אם אתה מוכן, בוא נתחיל.

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

1. קוד סימון

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

במקום להתקין עוד עורך קוד, אתה עדיין יכול להשתמש עדיין אחד הנוכחי שלך ולהפעיל את תחביר הדגשת בו. אז, בהודעה זו, אני אשתף כמה טיפים להוסיף LES קוד הדגשה לתוך 2 עורכי טקסט מפורסמים: טקסט הנשגב 2 ו פנקס רשימות++.

טקסט הנשגב 2

עורך זה הוא כרגע הבחירה המועדפת שלי כדי לעזור לי לכתוב קודים. יישום זה זמין עבור Windows, Linux ו- OSX, אז מה מערכת ההפעלה שלך, אתה עדיין תוכל לעקוב אחר טיפ זה.

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

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

התקן את קונסולת החבילה

ראשית, פתח את Sublime Text 2 והצג את המסוף מתפריט זה הצג> הצג מסוף

לאחר מכן, להעתיק ולהדביק את שורת הפקודה הבאה לתוך המסוף, ולאחר מכן הקש Enter כדי להתקין את החבילה שליטה מ wBond.net:

ייבוא ​​urllib2, os; pf = "חבילה Control.sublime-package"; ipp = sublime.installed_packages_path (); (אם לא); urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ()); פתח (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (', '% 20')). לקרוא ()) הדפס "אנא הפעל מחדש את טקסט סאבליים כדי לסיים את ההתקנה"

זה קונסולת החבילה יעזור לנו להתקין את החבילה הדגשת.

התקנת LESS- הדגשת החבילה

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

לאחר מכן, חפש את החבילה LESS מתוך רשימת המאגרים ולחץ על Enter.

המתן דקה עבור Sublime Text 2 כדי להוריד ולהתקין את החבילה עד שההודעה הבאה תוצג בשורת המצב.

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

פנקס רשימות++

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

התקן את LESS-highlight ב- Notepad++

הפעלת הדגשת צבע LESS ב- Notepad ++ היא קלה למדי.

תחילה להוריד את החבילה LESS עבור Notepad + + מקישור זה (userDefineLang_LESS.xml). אז לך ל תצוגה> דיאלוג בהגדרת משתמש.

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

פתח את הקובץ ללא. ועבור אל התפריט 'שפה'. כעת אתה אמור לראות את LESS כלול. בחר אותו כדי להחיל צבע הדגשת על תחביר LESS שלך.

משאבים נוספים

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

Adobe

אין ספק, Dreamweaver יש בסיס משתמש ענק. זה זמין עבור שניהם Mac ו- Windows. אז, אם אתה משתמש בעורך זה, הנה אחד מקור טוב להתקין את הדגשה פחות ב Adobe Dreamweaver.

קודה

אם אתה משתמש Mac אתה כנראה יודע Coda, עורך זה הוא אחד הפופולריים ביותר בקרב משתמשי מקינטוש. ו, הנה איך אתה יכול להתקין LESS ב Coda.

גאני

זהו אחד מעורכי הקוד הפופולריים יותר בקרב משתמשי לינוקס. כמה מחשבים במשרד שלי, כי לרוץ על לינוקס גם להשתמש Geany. אז, אם אתה משתמש בו גם, אתה יכול לכלול הדגשה LESS על ידי ביצוע הוראה זו ב SuperUser.com

2. מהדר פחות

שלא כמו ChrunchApp שיש לו מהדר LESS מובנה, העורכים האחרים לא יהיה זה כברירת מחדל. אמנם יש כמה דרכים לכלול את זה, אבל זה טכנית למדי עבור משתמשים בכלל. אז הפתרון הטוב ביותר שיש לי הוא לעשות את הידור באמצעות הכלים הבאים: WinLESS או LESS.app. WinLESS הוא מהדר המיועד Windows, בעוד LESS.app בנוי OSX.

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

ראשית, אני רוצה להוריד WinLESS ולהתקין אותו.

לחץ על הלחצן הוסף תיקייה ומצא את הספרייה שבה אתה שם את .פחות קבצים (אני מניח שכבר יצרת לפחות אחד). לאחר שתוסיף אחד; WinLESS יסרוק ולמצוא את כל .פחות קבצים ולהראות לך ברשימה.

עבור אל התפריט קובץ> הגדרה, וודא אפשרויות אלה נבדקות;

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

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

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

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

אם אתה משתמש ב- Mac, אתה יכול להשתמש LESS.app כי יש functinality כמו WinLESS.

מיקסים מוגדרים מראש

בעיצובים מודרניים של עיצוב אתרים מודרני, נשתמש בתכונות CSS3 כגון Gradient, Shadow או Border Radius שנראים כך:

-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;

או

רקע: -Moz-linear-gradient (למעלה, # f0f9ff 0%, # a1dbff 100%); רקע: -webkit-linear-gradient (למעלה, # f0f9ff 0%, # a1dbff 100%); רקע: ליניארי-שיפוע (למעלה, # f0f9ff 0%, # a1dbff 100%); background: -ms-linear-gradient (למעלה, # f0f9ff 0%, # a1dbff 100%); רקע: שיפוע לינארי (למעלה, # f0f9ff 0%, # a1dbff 100%);

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

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

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

לשים את כולם ביחד

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

     לחץ עלי 

ליצור style.less כמו גיליון סגנונות LESS הראשי שלנו, לשמור אותו באותה תיקייה עם מסמך HTML שלנו ולהוסיף את התיקיה WinLESS.

ייבא את אלמנטים הורדנו לפני השימוש בתחביר זה:

@import "אלמנטים";

עכשיו, אנחנו יכולים להשתמש בכל mixins שסופק מ element.less כמו .שיפוע, .מעוגל, ו .גובל. אני בטוח שם Mixins הוא די מובן מאליו.

לאחר מכן, לשים את הכללים LESS למטה, בגיליון הסגנונות שלך. בנוסף, שמור אותו שוב

 a display: inline-block; ריפוד: 10px 20px; צבע: # 555; text-decoration: none; .bw-gradient (#eee, 240, 255); . . &: רחף .bw-gradient (#eee, 255, 240);  

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

ובכן, זה לא כל כך רע זה לא, בהתחשב בכך כפתור זה נוצר עם פחות שורות ממה שהיה נחוץ. ו, הנה בפועל שנוצר סטטי CSS:

 a display: inline-block; ריפוד: 10px 20px; צבע: # 555; text-decoration: none; רקע: #eeeeee; הרקע: -webkit-gradient (ליניארי, שמאל למטה, שמאל למעלה, צבע להפסיק (0, # f0f0f0), color-stop (1, #ffffff)); רקע: -ms-linear-gradient (למטה, # f0f0f0 0%, # f0f0f0 100%); רקע: -Moz-linear-gradient (מרכז תחתית, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -Moz-background-clip: ריפוד; -webkit-background-clip: ריפוד-תיבת; רקע קליפ: ריפוד תיבת; border-top: solid 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  א: רחף רקע: #eeeeee; רקע: -webkit-gradient (ליניארי, שמאל למטה, שמאל למעלה, צבע להפסיק (0, #ffffff), צבע להפסיק (1, # f0f0f0)); רקע: -ms-linear-gradient (למטה, #ffffff 0%, #ffffff 100%); רקע: -Moz-linear-gradient (מרכז תחתית, #ffffff 0%, # f0f0f0 100%); 

לסיכום

הנה סיכום מהיר של מה יש לנו דנו בהודעה זו:

• על ידי הפעלת הדגשת תחביר בעורך הנוכחי שלנו, אין צורך להתקין עורך נוסף רק עבור חיבור תחביר LESS; זה יכול לחסוך לך כמה רווחים / זיכרון על הדיסק שלך.
• אנחנו גם לא צריכים עוד להוריד ולקשר את הספרייה LESS.js לתוך סעיף HTML הראש שלנו כפי שעשינו האחרון שלנו הדרכה. בדרך זו, מסמך ה- HTML נשאר נקי ומסודר.
• באמצעות כלי מהדר כמו WinLESS ו LESS.app יכול לייצר את הפלט CSS סטטי באופן מיידי. אז, אם יש משהו לא בסדר עם התחביר, אנחנו יכולים לבדוק את זה מיד.
• מראש Mixins כמו LESS אלמנטים הוא החבר הכי טוב שלנו. זה באמת יכול לחסוך את הזמן שלנו בעת עריכת נכס CSS3 מייגע.

.