מדריך פשוט וקל להבין סאס

לפני זמן מה כתב Thoriq Firdaus מאמר מצוין על תחילת העבודה עם Sass, אשר הראה לך כיצד להתקין ולהשתמש זה שימושי מאוד CSS preprocessor שפה (ייתכן שתרצה לבדוק את זה, אתה יודע, כדי להתחיל).

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

• כלי המסחר
• משתנים
• קינון
• הרחבת כללי כללים
• מיקסים
• בוררים Placeholder
• פעולות
• פונקציות

כלים של המסחר

Thoriq הראה לך איך אתה יכול להשתמש Sass משורת הפקודה באמצעות sass --ww פקודה.

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

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

משתנים

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

 $ primary_color: # 666666; .button color: $ primary_color;  חשוב color: $ primary_color;  

זה אולי לא נראה שימושי כאן, אבל לדמיין שיש 3,000 שורות של קוד. אם ערכת הצבעים שלך משתנה עליך להחליף כל ערך צבע ב- CSS. עם סאס אתה יכול פשוט שנה את הערך של ה $ primary_color משתנה ונעשה עם זה.

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

קינון

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

 # naver nav / * כללים עבור אזור הניווט / / #header nav ul / * כללים לתפריט * / # naver li li / * כללים לפריטי רשימה * / # naver / * כללים עבור קישורים * / 

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

הנה איך את הקוד לעיל יכול להסתכל Sass:

 #header nav * / * כללים עבור אזור הניווט * / ul / * כללים עבור התפריט * / li / * כללים לפריטי רשימה * / א / * כללים לקישורים * / 

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

חסרון אחד של קינון הוא שהוא יכול להוביל ספציפיות מיותרת. בדוגמה שלמעלה התייחסתי לקישורים עם #header ניווט ב- a. אתה יכול גם להשתמש #header nav ul li a אשר כנראה יהיה יותר מדי.

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

 #header nav * / * כללים עבור אזור הניווט * / ul / * כללים עבור התפריט * / li / * כללים לפריטי רשימה * / a / * כללים לקישורים * / 

הרחבת כללי כללים

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

 .כפתור display: inline-block; צבע: # 000; רקע: # 333; border-radius: 4px; ריפוד: 8px 11px;  .but-primary @extend .button; רקע: # 0091C2. בוטון קטן @extend .button; font-size: 0.9em; ריפוד: 3px 8px;  

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

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

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

מיקסים

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

כיצד ליצור כלל מעבר עבור רכיבי מעבר:

 @mixing מרחף-אפקט -webkit-transfer: background-color 200ms; -מעבר-מעבר: צבע-רקע 200ms; - מעבר: צבע רקע 200ms; מעבר: צבע רקע 200ms;  a @ include hover-effect;  .button @include hover-effect;  

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

 @mixin לרחף-אפקט ($ מהירות) -webkit- מעבר: צבע רקע צבע-מהירות; -מעבר-מעבר: צבע-רקע-מהירות; -המעבר: מהירות צבע-רקע; מעבר: מהירות צבע-רקע;  a @ כלול ריחוף-אפקט (200ms);  .button @ include hover-effect (300ms);  

בוררים Placeholder

בוררים Placeholder הוצגו עם Sass 3.2 ו פתרו בעיה שעלולה לגרום קצת bloat בקוד CSS שנוצר שלך. עיין בקוד זה שיוצר הודעות שגיאה:

 .הודעה font-size: 1.1em; ריפוד: 11px; border-width: 1px; border-style: Solid;  .message-risk @extend .message; רקע: # C20030; צבע: #fff; border-color: # A8002A;  .message-success @extend .message; רקע: # 7EA800; צבע: #fff; color-color: # 6B8F00;  

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

 % message font-size: 1.1em; ריפוד: 11px; border-width: 1px; border-style: Solid;  .message-risk @ Nextend% button; רקע: # C20030; צבע: #fff; border-color: # A8002A;  .message-success @ Nextend% button; רקע: # 7EA800; צבע: #fff; border-color: # 6D9700;  

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

פעולות

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

 .מכולה רוחב: 100%;  מאמר float: left; רוחב: 600px / 960px * 100%;  בצד float: right; רוחב: 300px / 960px * 100%;  

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

 .מכולה רוחב: 100%;  מאמר float: left; רוחב: 62.5%;  בצד float: right; רוחב: 31.25%;  

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

 $ primary: #EAEA800; .message-success @ Nextend% button; רקע: $ primary; צבע: #fff; border-color: $ primary - # 111;  

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

פונקציות

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

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

 $ primary: #EAEA800; .message-success @ Nextend% button; רקע: $ primary; צבע: #fff; color-color: darken ($ primary, 5);  

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

ה ceil כמו ב- PHP, מחזירה מספר מעוגל למספר הבא. זה יכול לשמש בעת חישוב רוחב העמודות או אם אתה לא רוצה להשתמש הרבה מקומות עשרוניים CSS הסופי.

 .title font-size: ceil ($ title_size * 1.3314);  

סקירה כללית

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

אם אתה מעוניין preprocessor CSS דומה אחר אני מציע להעיף מבט על LESS (או לבדוק את המדריך של מתחילים שלנו) - הקרן הבסיסית היא הרבה יותר זהה!