גיליונות סגנונות מדהים באמצעות מצפן ב Sass

בהודעה האחרונה שלנו, הזכרנו פעם על מצפן. על פי האתר הרשמי, הוא מתואר קוד פתוח CSS Authoring Framework.

בקיצור, מצפן הוא סיומת Sass, וכמו אלמנט LESS של LESS, יש בו חבורה של מיקסנים מוכנים לשימוש ב- CSS3, אלא שהוא הוסיף גם כמה דברים אחרים שהופכים אותו לכלי נלווה חזק יותר לסאס. בוא נבדוק את זה.

התקנת מצפן

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

בלעדיהם, אתה צריך לעשות את זה “ידנית” דרך מסוף / שורת הפקודה. לשם כך, הקלד את שורת הפקודה הבאה;

על מק / מסוף לינוקס

 פנינה sudo להתקין מצפן - - 

על שורת הפקודה של Windows

 פנינה להתקין מצפן - - 

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

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

 מצפן 

לקריאה נוספת: מצפן שורת הפקודה תיעוד

תצורת מצפן

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

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

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

 line_comments = false 

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

 output_style =: מורחבת 

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

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

 שעון מצפן 

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

לערבב

לפני הליכה דרך CSS3, ב הראשי שלנו .scss קובץ, אנחנו צריכים לייבא את המצפן עם השורה הבאה @import "מצפן";, זה יהיה לייבא את כל הרחבות מצפן. אבל, אם אנחנו צריכים רק CSS3 אנחנו יכולים גם לעשות את זה יותר ספציפי עם הקו הזה @import "מצפן / css3".

לקריאה נוספת: מצפן CSS3.

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

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

 גוף background-color: # f3f3f3;  קטע width: 500px; שוליים: 50px אוטומטי 0; div width: 250px; גובה: 250px; צבע רקע: #ccc; שוליים: 0 אוטומטי;  

בנוסף, כדי לקבל מלבן שלנו פינות מעוגלות, אנחנו יכולים לכלול את המצפן CSS3 Mixins כדלקמן;

 גוף background-color: # f3f3f3;  קטע width: 500px; שוליים: 50px אוטומטי 0; div width: 250px; גובה: 250px; צבע רקע: #ccc; שוליים: 0 אוטומטי; @ כולל רדיוס גבול;  

זה רדיוס הגבול Mixins יפיק את כל קידומות הדפדפן, כברירת מחדל, רדיוס הפינה יהיה 5px. אבל, אנחנו יכולים גם לציין את הרדיוס לצורך שלנו בדרך זו @ כולל רדיוס גבול (10px); .

 סעיף div רוחב: 250px; גובה: 250px; צבע רקע: #ccc; שוליים: 0 אוטומטי; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;  

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

 גוף background-color: # f3f3f3;  קטע width: 500px; שוליים: 50px אוטומטי 0; div width: 250px; גובה: 250px; צבע רקע: #ccc; שוליים: 0 אוטומטי; @ כולל רדיוס גבול (10px); @ כולל סיבוב;  

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

 סעיף div רוחב: 250px; גובה: 250px; צבע רקע: #ccc; שוליים: 0 אוטומטי; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform: לסובב (45deg); -Moz-transform: לסובב (45deg); -ms-transform: לסובב (45deg); -O-transform: לסובב (45deg); להפוך: לסובב (45deg);  

מצפן עזרה

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

הוספת @ גופן פנים קבצים

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

 @ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') פורמט ('trutype'), url ('/ fonts / font.otf') פורמט ('opentype'), url ('/ fonts / font.woff') ('woff'), כתובת אתר ('/ fonts / font.eot') פורמט ('מוטבע-אופנטי');  

עם מצפן אנחנו יכולים לעשות את אותו הדבר בקלות רבה יותר font-files () המסייעים;

 @include גופן פנים ("MyFont", קבצי גופן ("font.ttf", "font.otf", "font.woff", "font.eot")); 

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

עם זאת, אם נבחן את הקוד מקרוב, תראה שלא הוספנו את נתיב הגופן (/ גופנים /). אז, איך מצפן יודע איפה הגופנים נמצאים? ובכן, לא להתבלבל, נתיב זה נגזר למעשה config.rb עם fonts_path נכס;

 fonts_dir = "גופנים" 

אז, נניח שאנחנו לשנות את זה fonts_dir = "myfonts", אז את הקוד שנוצר יהיה url ('/ myfonts / font.ttf'). כברירת מחדל, כאשר איננו מציינים את הנתיב, מצפן ינחה אותו גיליונות סגנונות / גופנים.

הוספת תמונה

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

 div background-image: url ('/ img / the-image.png');  

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

קוד זה גם ייצור את אותה הצהרת CSS בדיוק כמו בקטע הראשון.

 div background-image: image-url (the-image.png);  

בנוסף, מצפן יש גם Image Dimension Helpers, זה בעיקר מזהה את רוחב התמונה ואת גובה, ולכן במקרה שאנחנו צריכים את שניהם כדי להיות שצוין ב- CSS שלנו נוכל להוסיף שתי שורות נוספות, כדלקמן;

 div background-image: image-url ("images.png"); width: image-width ("images.png"); גובה: image-height ("images.png");  

הפלט יהיה משהו כזה;

 div background-image: url ('/ img / images.png? 1344774650'); רוחב: 80px; גובה: 80px;  

לקריאה נוספת: מצפן עוזר פונקציות

מחשבה סופית

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

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

• הורד מקור