תחילת העבודה עם ההתקנה Sass ואת היסודות

במאמר זה, אנחנו הולכים לדון Preprocessor CSS בשם Sass או גיליונות סגנונות.

אם היית עוקב אחר ההודעות הקודמות שלנו ב- LESS, אנו בטוחים שאתה מכיר את מעבד. הן Sass והן LESS הן CSS Preprocessors אשר בעיקר מרחיבות את הדרך בה אנו מרכיבים רגיל static-CSS בצורה דינמית יותר באמצעות שפות תכנות כמו משתנים, Mixins, ופונקציות.

התקנת Sass

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

לאחר השלמת ההתקנה, באפשרותך לעבור אל Terminal (ב- Mac) או ב- Command Prompt (ב- Windows) ולאחר מכן הקלד את שורת הפקודה הבאה:

ב- Mac;

 פנינה sudo להתקין 

ב- Windows;

 פנינה להתקין 

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

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

 sass --watch נתיב / ספריית sass 

שורת הפקודה לעיל יהיה לצפות בכל .scss/.סאס קבצים ב - Windows XP נתיב / ספרייה וכאשר אחד הקבצים בספרייה זו משתנה, Sass תעדכן את הקבצים המתאימים או תיצור אחד אם לא קיים.

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

 sass --watch נתיב / sass-directory: path / css-directory 

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

 sass --watch path / sass-directory / styles.css 

אם פקודת השעון תצליח, משהו כמו ההודעה הבאה יופיע במסוף / שורת הפקודה.

לקריאה נוספת: Auto-Compile קבצים Sass עם Sass 3

יישומי סאס

עם זאת, אם אתה שונא לעבוד דרך מסוף או שורת הפקודה, אתה יכול להשתמש בכמה יישומים עבור Sass. האפשרות החופשית היא סקאוט; הוא בנוי על Adobe Air אז זה יכול להיות מופעל על כל מערכת ההפעלה (Windows, OSX ו- Linux).

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

אז אם אין לך את הסבלנות על זה, יש גם כמה אפשרויות בתשלום. המחיר משתנה עבור כל יישום, Compass.app הולך עבור $ 10, Fire.app, $ 14 ו Codekit עבור $ 25.

הדגשת קוד

למרות ש- Sass הוא בעיקר סיומת CSS, ייתכן שהעורך הנוכחי שלך לא ידגיש את התחביר כראוי. למרבה המזל, יש כבר כמה חבילות עבור כמעט כל עורך קוד כדי לאפשר .סאס או .scss הדגשת קוד.

אם אתה עובד עם טקסט Sublime 2 כמו שאני עושה, אתה יכול להשתמש אלה חבילות; טקסט הנשגב HAML & Sass טקסט Sublime 2 Sass חבילה, ועל דרך קלה יותר, אתה יכול להתקין את אחת החבילות האלה באמצעות בקרת החבילה.

עבור עורכי קוד אחרים, ראה למטה, או נסה את Google עבורו.

• זה אחד גדול screencast הדרכה על עבודה על סאס עם Dreamweaver
• מצב סאס עבור קודה. אבל, נראה מצב זה כבר משולב עם קודה כמו גירסה 2
• SCM חבילת הרשמי
• אספרסו סוכר לסאס
• חבילות InType

שפת סאס

Sass ו LESS למעשה לשתף כמה שפות נפוצות, להלן כמה מהם.

משתנים

 $ color-base: # 000; $ width: 100px; 

ההבדל היחיד ממשתני LESS הוא שהמשתנה ב- Sass מוגדר עם a $ סימן.

כללי קינון

 כותרת width: 980px; גובה: 80px; nav ul list-style: none; ריפוד: none; שוליים: none;  li display: inline; a text-decoration: none;  

מיקסים ופונקציות

 @mixin גבול רדיוס (רדיוס $) -moz-border-radius: $ radius; -webitit-border-radius: $ radius; -ms-border-radius: $ radius; radius radius: $ radius;  

פעולות

 li width: $ width / 5 - 10px;  

הצהרה מותנית

 @if lightness ($ color-base)> = 51% background-color: # 333333;  @sese background-color: #ffffff;  

ב LESS אתה יכול לעשות דבר דומה באמצעות ביטוי המשמר, אשר יש לנו מכוסה על זה הדרכה.

מחשבה סופית

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