ساس تعليمي بناء vCard على الانترنت مع ساس وبوصلة

 
 
  
 
 
ثوريك فردوس
 
[email protected]
 
(+62) 1.2345.678.9
 
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse dolor neque ، eleifend في pellentesque quis ، convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
فيس بوك
 
 تغريد
 
جوجل+
 
Dribbble
 
 
 
 

كما ترون أعلاه ، الهويات الاجتماعية المدرجة في "الاجتماعية"تم تصميم القسم داخل عناصر القائمة حتى نتمكن من عرضها بسهولة جنبًا إلى جنب. يتم إعطاء كل فئة اسمًا يتبع هذه الاتفاقية الاجتماعي الفيسبوك, الاجتماعي تويتر, اجتماعية جوجل وما إلى ذلك وهلم جرا.

تكوين البوصلة

نحتاج إلى تكوين Compass قليلاً عن طريق إلغاء تنفيذ بضعة أسطر في config.rb الملف ، على النحو التالي:

 # يمكنك تحديد نمط الإخراج المفضل لديك هنا (يمكن تجاوزه عن طريق سطر الأوامر): output_style =: Extended # لتمكين المسارات النسبية للأصول عبر وظائف مساعد البوصلة. Uncomment: النسبية = true # لتعطيل تعليقات تصحيح الأخطاء التي تعرض الموقع الأصلي لمحدداتك. Uncomment: line_comments = false 

إذا لم تتمكن من العثور عليها config.rb الملف ، ربما لم تقم بتشغيل هذا الأمر البوصلة الحرف الأول في دليل المشروع الخاص بك.

استيراد الملفات

نظرًا لأننا سنستخدم Compass ، نحتاج إلى استيراده باستخدام ؛

 import "البوصلة" ؛ 

وأفضّل الشخصي إعادة تعيين الأنماط الافتراضية من المتصفحات بحيث يتم تقديم الإخراج بشكل أكثر اتساقًا. بوصلة ، في هذه الحالة ، لديها وحدة إعادة تعيين. تعتمد هذه الوحدة على إعادة تعيين CSS لـ Eric Meyer ويمكن استيرادها باستخدام؛

 import "بوصلة / إعادة تعيين" ؛ 

ومع ذلك ، أنا أفضل استخدام تطبيع ذلك لحسن الحظ كما يأتي في شكل ساس / Scss. قم بتنزيل الملف هنا واحفظه في ساس دليل العمل واستيراده في ورقة أنماط لدينا.

 @ استيراد "تطبيع" ؛ 

اقتراحات للقراءة: مراجعة مستوى أولوية نمط CSS

المتغيرات

سيكون لدينا بالتأكيد بعض القيم الثابتة في ورقة الأنماط ، وبالتالي سنقوم بتخزينها في المتغيرات وسيحدد هذان المتغيرين أدناه اللون الأساسي لبطاقة vCard الخاصة بنا.

 $ base: #fff؛ $ dark: تغميق (قاعدة $ ، 10٪) ؛ 

بينما ال $ عرض المتغير أدناه سيكون عرض صفحتنا. سيكون أيضًا الأساس لتحديد أحجام العناصر الأخرى.

 العرض $: 500 بكسل ؛ $ space: $ width / 25؛ // = 20 بكسل 

و ال $ الفضاء المتغير ، كما ترون ، سيكون التباعد الافتراضي أو حجم العمود في vCard لدينا والذي سيكون في هذا المثال 20px.

يحتوي Compass أيضًا على مساعدين للكشف عن حجم الصورة وسنستخدم هذه الميزة في ملف تعريف الصور الخاص بنا ، على النحو التالي ؛

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

اضافية إضافة من ((مساحة $ / 4) * 2) في الرمز أعلاه ، هو حساب إجمالي عرض الصورة بما في ذلك الحدود التي سوف تأطير الصورة. الإطار له بوجه عام جانبان ؛ أعلى وأسفل / اليسار واليمين, هذا هو السبب في أننا مضاعفة نتيجة الانقسام بواسطة 2.

الوراثة محدد

يبدو أن هناك بعض المحددات في ورقة الأنماط الخاصة بنا والتي سيكون لها نفس قواعد التصميم. لتجنب التكرار في التعليمات البرمجية الخاصة بنا ، سنحتاج إلى تحديد هذه الأنماط في المقام الأول ورثها بـ @تمديد التوجيه كلما دعت الحاجة. هذه الطريقة ، في ساس ، المعروف باسم الوراثة محدد, ميزة مفيدة للغاية مفقود في LESS.

 .float-left float: left؛  .box-sizing include box-sizing (border-box)؛  

الأنماط

عندما يتم إعداد كل ما هو ضروري ، فقد حان الوقت لتصميم vCard لدينا ، بدءًا من لون الخلفية في مستند HTML الخاص بنا ؛

 html height: 100٪؛ لون الخلفية: قاعدة $ ؛  

بصيغة بطاقة

تحدد الأنماط التالية برنامج التفاف vCard. إذا كنت تعمل مع LESS سابقًا ، فسيكون هذا الرمز مألوفًا لك وسهل الهضم.

 .vcard width: $ width؛ الهامش: 50px auto ؛ لون الخلفية: أغمق (قاعدة $ ، 5 ٪) ؛ الحدود: 1px الصلبة $ الظلام. تضمين @ دائرة نصف قطرها (3 بكسل) ؛ ul padding: 0؛ الهامش: 0 li style-style: none؛  

عرض المجمّع يرث القيمة من $ عرض متغير. لون الخلفية أغمق 5٪ من اللون الأساسي ، بينما سيكون لون الحدود أغمق 10٪. يتم تحقيق هذا التلوين باستخدام وظائف Sass color.

سوف يكون vCard أيضا 3PX نصف قطر الزوايا الدائرية التي يتم تحقيقها باستخدام Compass CSS3 Mixins ؛ الحدود بين دائرة نصف قطرها (3PX).

القسم الحيوي

كما لاحظنا في وقت مبكر من هذا البرنامج التعليمي ، يمكن تقسيم vCard إلى قسمين. ستحدد هذه الأساليب المتداخلة أدناه القسم الأول الذي يحتوي على ملف تعريف الصورة مع بعض التفاصيل (الاسم والبريد الإلكتروني والهاتف).

 .bio border-bottom: 1px $ $ dark dark؛ الحشوة: الفضاء $؛ تضمين التغريدة im extend .float-left؛ العرض محجوب؛ الحدود: ($ space / 4)  .detail extend .float-left؛ تضمين التغريدة اللون: أغمق (قاعدة $ ، 50 ٪) ؛ الهامش: left: $ space؛ أسفل: $ الفضاء / 2 ؛  العرض: $ width - (($ space * 3) + $ img)؛ li &: قبل width: $ space؛ الارتفاع: الفضاء $ ؛ الهامش الأيمن: مساحة $ ؛ font-family: "ModernPictogramsNormal"؛  & .name: قبل content: "f"؛  & .email: قبل content: "m"؛  & .phone: قبل content: "N"؛  

هناك شيء واحد من الشفرة أعلاه نعتقد أنه يلزمك أن تأخذ إشعارًا. العرض في .التفاصيل محدد محدد مع هذه المعادلة $ width - (($ space * 3) + $ img)؛.

يتم استخدام هذه المعادلة لحساب التفاصيل بشكل حيوي عرض بطرح عرض ملف تعريف الصورة والمسافات (الحشو والهامش) من إجمالي عرض vCard.

القسم الاجتماعي

الأنماط أدناه مخصصة للقسم الثاني في vCard. في الواقع لا يوجد فرق مع CSS العادي هنا ، الآن فقط يتم تداخلها ، ويتم تعريف بعض القيم مع المتغيرات.

 .اجتماعية لون الخلفية: $ dark؛ العرض: 100 ٪ ؛ الحشوة: الفضاء $؛ تضمين التغريدة ul text-align: center؛ li display: inline-block؛ العرض: 32 بكسل ؛ الارتفاع: 32 بكسل ؛ زخرفة النص: لا شيء ؛ عرض: كتلة مضمنة. العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ المسافة البادئة للنص: 100٪ ؛ الفضاء الأبيض: nowrap. إخفاء الفائض؛  

في هذا القسم ، سنقوم بعرض أيقونات الوسائط الاجتماعية باستخدام تقنية sprite للصورة ، وميزة Compass للقيام بهذه المهمة بشكل أسرع.

بادئ ذي بدء ، نحتاج إلى وضع أيقوناتنا في مجلد خاص - فلنقم بتسمية المجلد / الاجتماعية /, فمثلا. مرة أخرى في ورقة أنماط ، سلسل تلك الرموز مع ما يلي @استيراد قاعدة.

 import "social / *. png"؛ 

ال اجتماعي / الرجوع أعلاه إلى المجلد حيث نقوم بتخزين الرموز. يجب أن يكون هذا المجلد متداخلًا داخل مجلد الصور. الآن ، إذا ألقينا نظرة على مجلد الصور لدينا ، يجب أن نرى صورة العفريت التي تم إنشاؤها باستخدام أحرف عشوائية ، مثل الاجتماعية-sc805f18607.png. في هذه المرحلة ، لم يحدث شيء بعد في الواجهة الأمامية ، حتى نطبق الأنماط بالسطر التالي.

 @ تشمل جميع العفاريت الاجتماعية ؛ 

النتيجة النهائية

أخيرًا ، بعد كل العمل الشاق يمكننا الآن رؤية النتيجة مثل هذا:

في حال كنا نعتقد ذلك 500px واسع جدًا لاحقًا ، نحتاج فقط إلى تغيير القيمة في $ عرض متغير - على سبيل المثال, 350px - الباقي سوف “سحرية” يمكن تعديلها. يمكنك أيضًا تجربة متغير اللون.

• عرض تجريبي
• تحميل المصدر

استنتاج

لقد أوضحنا لك في هذا البرنامج التعليمي كيفية إنشاء vCard بسيط عبر الإنترنت باستخدام Sass و Compass؛ هذا مجرد مثال ، ولكن. ساس وبوصلة قوية بالفعل ، لكن في بعض الأحيان لا يكون ذلك ضروريًا. على سبيل المثال ، عندما نعمل على موقع ويب يحتوي على بضع صفحات وربما لن نحتاج أيضًا سوى إلى عدد أقل من خطوط الأنماط ، فإن استخدام Sass و Compass يعتبر مفرطًا.

هذا المنشور يغلق سلسلة Sass الخاصة بنا ونأمل أن تستمتع بها. إذا كان لديك أي سؤال بخصوص هذا الموضوع ، فلا تتردد في إضافته في مربع التعليقات أدناه.