השוואה בין Sass לעומת LESS

יש מספר CSS Preprocessor, LESS, Sass, Stylus, ו Swith CSS, רק כדי שם כמה. מעבד, כפי שאמרנו לעתים קרובות בעבר, נועד בעיקר להפוך CSS authoring דינמי יותר, מאורגן ופורה. אבל, השאלה היא, מי מהם עושה את העבודה הטובה ביותר?

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

בואו נתחיל.

התקנה

נתחיל עם הצעד הבסיסי מאוד, התקנה. שניהם Sass ו LESS בנויים על פלטפורמה אחרת, Sass פועל על רובי בעוד LESS היא ספריית JavaScript (אשר היה למעשה גם בנוי על רובי בתחילה).

סאס: סאס צריך רובי כדי לעבוד, ב- Mac זה כבר מותקן מראש, אבל ב- Windows אתה כנראה צריך לקבל את זה מותקן לפני שתוכל להתחיל לשחק עם סאס. יתר על כן, סאס צריך להיות מותקן דרך מסוף או שורת הפקודה. ישנם מספר יישומי GUI אתה יכול להשתמש במקום אבל הם לא בחינם.

פחות: LESS בנויה על JavaScript, ולכן כל כך intalling הוא קל כמו קישור ספריית JavaScript למסמך ה- HTML שלך. יש גם כמה יישומי GUI שיסייעו בהרכבת LESS ל- CSS ורובם חופשיים ומביצועים טוב מאוד (למשל WinLess ו- LESS.app).

סיכום: LESS הוא בבירור להוביל.

תוספים

שניהם Sass ו LESS יש הרחבות לפיתוח אינטרנט מהיר וקל יותר.

סאס: בהודעה האחרונה שלנו, דנו על מצפן, ההרחבה הנוכחית והפופולרית מבוססי סאס. מצפן יש מספר Mixins לכתוב תחביר CSS3 בפחות זמן.

אבל מצפן הוא מעבר רק CSS3 Mixins, זה הוסיף תכונות שימושיות אחרות כגון Helpers, פריסה, טיפוגרפיה, פריסת רשת ואפילו ספרייט תמונות. יש לזה גם config.rb קובץ שבו אנו יכולים לשלוט על פלט CSS וכמה העדפות אחרות. אז, בקיצור, מצפן הוא חבילה All-in-One לעשות פיתוח אינטרנט עם Sass.

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

הנה כמה הרחבות LESS שייתכן שתצטרך לכלול בפרויקט שלך:

• לערבב: LESS אלמנטים, Preboot, מעט Mixins.
• רשת: 960.gs, ללא מסגרת, סמנטי
• פריסה: אפילו פחות
• שונות: טוויטר Bootstrap

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

שפות

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

להלן, נבחן כמה מהשפות הנפוצות ביותר הן Sass ו LESS (מבוסס על הניסיון שלי).

קינון

הכלל קינון הוא נוהג טוב כדי למנוע סלקטורים בכתב שוב ושוב הן Sass ו LESS יש את אותה אופנה בכללים קינון;

Sass / Scss ו LESS

 nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; ul ריפוד: 0; שוליים: 0;  

אבל Sass / Scss לוקח את השיטה צעד נוסף על ידי ומאפשר לנו גם קן מאפיינים בודדים, הנה דוגמה:

 nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; ul ריפוד: 0; שוליים: 0;  border: style: solid; משמאל: width: 4px; צבע: # 333333;  ימינה: width: 2px; צבע: # 000000;  

קוד זה ייצור את הפלט הבא.

 nav margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; border-style: Solid; border-left-width: 4px; border-left-color: # 333333; border-right-width: 2px; border-right-color: # 000000;  nav ul ריפוד: 0; שוליים: 0;  

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

תערובת ומבחר בירושה

Mixins ב Sass ו LESS מוגדרים קצת אחרת. בסאס אנחנו משתמשים@mixin בעוד שאנו ב- LESS אנו מגדירים אותו עם בורר הכיתה. הנה דוגמה:

Sass / Scss

 @mixin גבול רדיוס ($ ערכים) border-radius: $ values;  ניווט margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; @ כולל רדיוס גבול (10px);  

פחות

 .border (@radius) border-radius: @radius;  ניווט margin: 50px auto 0; רוחב: 788 פיקסלים; גובה: 45px; .border (10px);  

Mixines, ב Sass ו LESS, משמש כוללים מאפיינים מתוך אחד כללים לארכיון אחר. ב Sass, שיטה זו נלקחת עוד יותר עם בחר בירושה. המושג זהה, אך במקום להעתיק את כל המאפיינים, Sass תרחיב או קבוצת בוררים בעלי אותם מאפיינים וערכים באמצעות @extend הוראה.

עיין בדוגמה הבאה:

 .מעגל border: 1px solid #ccc; border-radius: 50px; overflow: hidden;  .avatar @extend .circle;  

קוד זה יוביל כ;

 .מעגל, .avatar border: 1px solid #ccc; border-radius: 50px; overflow: hidden;  

סיכום: סאס הוא צעד אחד קדימה על ידי Mixins שונים ו בוררים ירושה.

פעולות

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

Sass / Scss

 $ margin: 10px; div margin: $ margin - 10%; / * שגיאת תחביר: יחידות שאינן תואמות: '%' ו- 'px' * / 

פחות

 @margin: 10px; div margin: @margin - 10%; / * = 0px * / 

סיכום: סאס, במקרה זה, עושה את זה בצורה מדויקת יותר; כמו% ו px לא שווה, זה צריך להחזיר שגיאה. אמנם, אני באמת מקווה שזה יכול להיות משהו כמו 10px - 10% = 9px.

הודעות שגיאה

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

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

כשראיתי לראשונה את ההודעה, בקושי הצלחתי להבין אותה. כמו כן, נראה סאס הוא קצת מחוץ למקום שבו השגיאה. הוא אמר כי השגיאה היא על שורה 7, במקום 6.

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

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

תיעוד

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

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

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

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

סיכום: המצגת תיעוד LES הוא טוב יותר, למרות Sass יש תיעוד מקיף יותר, אז אני חושב שאנחנו יכולים לקרוא לזה אחד עניבה.

מחשבה סופית

אני חושב שמדובר במסקנה ברורה סאס טובה יותר עם ציון כולל של 5 לעומת 3 בפחות. עם זאת, אין זה אומר כי LESS הוא רע; הם פשוט צריכים להיות טובים יותר. בסופו של דבר, זה עדיין תלוי בהחלטה של ​​משתמש הקצה לבחור את preprocessor על פי בחירתם. היה זה Sass או LESS, כל עוד הם נוחים יותר פרודוקטיביים, אז זה המנצח ברשימה שלהם.

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