Sass הדרכה בניית vCard מקוון עם Sass & מצפן

 
 
  
 
 
תירק פירדוס
 
[email protected]
 
(+) 1.2345.678.9
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. סוסיפנדיס דולור נקה, אליפנד ב quentesque quis, convallis לשבת amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
פייסבוק
 
 טוויטר
 
Google+
 
זלילה
 
 
 
 

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

תצורת מצפן

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

 # אתה יכול לבחור את סגנון הפלט המועדף שלך כאן (ניתן לדרוס דרך שורת הפקודה): output_style =: Expand # כדי לאפשר נתיבים יחסיים לנכסים באמצעות פונקציות עוזר מצפן. ביטול תגובה: יחסי_ציונים = נכון # כדי להשבית באגים הערות המציגות את המיקום המקורי של בוררים שלך. Uncomment: line_comments = false 

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

ייבוא ​​קבצים

מכיוון שנשתמש במצפן, עלינו לייבא אותו באמצעות;

 @import "מצפן"; 

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

 @import "מצפן / איפוס"; 

עם זאת, אני מעדיף להשתמש לנרמל את זה תודה מגיע גם בפורמט Sass / Scss. הורד את הקובץ כאן, שמור אותו סאס מדריך עבודה ולייבא אותו לתוך stylesheet שלנו.

 @import "לנרמל"; 

קריאה מומלצת: סקירת רמת עדיפות CSS

משתנים

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

 $ base: #fff; $ dark: darken ($ base, 10%); 

בזמן ש רוחב המשתנה שלהלן יהיה רוחב הדף שלנו; זה יהיה גם הבסיס להגדרת גדלי אלמנטים אחרים.

 $ width: 500px; $ space: $ width / 25; // = 20px 

וה $ שטח משתנה, כפי שניתן לראות, יהיה ריווח ברירת המחדל או גודל העמודה ב- vCard שלנו שבדוגמה זו יהיה 20px;

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

 $ img: image-width ("me.jpg") + (($ space / 4) * 2); 

התוספת בנוסף of (($ space / 4) * 2) בקוד לעיל, היא לחשב את רוחב התמונה הכולל כולל את הגבול מסגרת התמונה. מסגרת בדרך כלל יש שני צדדים; למעלה ולמטה / שמאלה וימינה, בגלל זה אנחנו מכפילים את תוצאה חלוקה על ידי 2.

בחר בירושה

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

 .צף שמאלה float: left; . גודל תיבת הסימון @ כולל תיבה של גודל תיבת גבול;  

סגנונות

כאשר כל זה נחוץ כבר ההתקנה, אז זה הזמן סגנון vCard שלנו, החל עם צבע רקע למסמך HTML שלנו;

 html גובה: 100%; צבע רקע: $ base;  

vCard

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

 .vcard width: $ width; שוליים: 50px אוטומטי; צבע רקע: כהה (בסיס $, 5%); border: 1px solid $ dark; @ כולל רדיוס גבול (3px); ul ריפוד: 0; שוליים: 0; li list-style: none;  

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

VCard יהיה גם 3px רדיוס של פינות מעוגלות מושגת באמצעות Compass CSS3 Mixins; radius-radius (3px).

ביו

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

 .ביו border-bottom: 1px solid $ dark; ריפוד: $ space; @extend .box-sizing; img @extend .float-left; בלוק תצוגה; border: ($ space / 4) #ffffff מוצק; . @extend .float-left; @extend .box-sizing; צבע: כהה (בסיס $, 50%); שולי: left: $ space; בתחתית: $ space / 2;  רוחב: $ width - (($ space * 3) + $ img); li &: before width: $ space; גובה: $ space; שוליים-ימין: $ space; font-family: "ModernPictogramsNormal";  & .name: לפני content: "f";  & .email: לפני content: "m";  & .phone: לפני content: "N";  

יש דבר אחד מן הקוד לעיל כי אנחנו חושבים שאתה צריך לקחת הודעה. הרוחב ב .פרט בחר את המשוואה עם משוואה זו $ width - (($ space * 3) + $ img);.

משוואה זו משמשת לחישוב דינמי של הפרטים רוחב על ידי גריעת רוחב פרופיל התמונה והחללים (ריפוד ושוליים) מהרוחב הכולל של vCard.

סעיף חברתי

הסגנונות שלהלן הם עבור הקטע השני ב- vCard. אין למעשה הבדל עם CSS רגיל כאן, רק עכשיו הם מקוננים, וכן כמה ערכים מוגדרים עם משתנים.

 .חברתי background-color: $ dark; רוחב: 100%; ריפוד: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; רוחב: 32px; גובה: 32px; a text-decoration: none; הצג: inline-block; רוחב: 100%; גובה: 100%; הזנת טקסט: 100%; White-space: nowrap; overflow: hidden;  

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

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

 @import "social / *. png"; 

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

 @ לכלול כל חברתי- sprites; 

תוצאה סופית

לבסוף, אחרי כל העבודה הקשה אנחנו יכולים עכשיו לראות את התוצאה ככה:

אם אנחנו חושבים כך 500px הוא רחב מדי מאוחר יותר, אנחנו רק צריכים לשנות את הערך ב רוחב משתנה - לדוגמה, 350px - כל השאר “קסם” להיות מותאם. ניתן גם להתנסות עם משתנה צבע.

• הצג הדגמה
• הורד מקור

סיכום

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

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