صفحات أنماط رهيبة باستخدام لغة البوصلة في ساس

في نشرتنا الأخيرة ، ذكرنا مرة واحدة حول البوصلة. وفقا للموقع الرسمي ، يوصف بأنه مفتوح المصدر CSS التأليف الإطار.

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

تثبيت البوصلة

بوصلة ، مثل ساس, يحتاج إلى تثبيت في نظامنا. ولكن إذا كنت تستخدم تطبيقًا مثل Scout App أو Compass.app ، فلن يكون ذلك ضروريًا.

بدونهم ، تحتاج إلى القيام بذلك “يدويا” عبر محطة / موجه الأوامر. للقيام بذلك ، اكتب سطر الأوامر التالي ؛

على Mac / Linux Terminal

 سودو جوهرة تثبيت البوصلة 

على ويندوز موجه الأوامر

 جوهرة تثبيت البوصلة 

في حالة نجاح التثبيت ، يجب أن تتلقى إشعارًا كما هو موضح أدناه ؛

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

 البوصلة الحرف الأول 

قراءة متعمقة: بوصلة وثائق سطر الأوامر

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

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

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

تجريد السطر التعليق الذي تم إنشاؤه بواسطة Compass؛ وضعنا صحيح إذا كنا بحاجة إلى تعليقات لطباعة أو خاطئة إذا لم يكن لديك ل.

 line_comments = خطأ 

يمكننا أيضا أن نقرر إخراج CSS. هناك أربعة خيارات يمكننا تحديدها :موسع, :المدمج, :مضغوطو : متداخلة. في الوقت الحالي ، نحتاج فقط إلى توسيعه لأننا ما زلنا في مرحلة التطوير.

 output_style =: موسع 

أعتقد أن هذه التكوينات ستكون كافية لمعظم المشاريع بشكل عام ، لكن يمكنك دائمًا الرجوع إلى هذه الوثائق ، مرجع تكوين البوصلة إذا كنت بحاجة إلى مزيد من التفضيلات.

وأخيرا ، نحن بحاجة إلى راقب كل ملف في الدليل مع سطر الأوامر هذا ؛

 مشاهدة البوصلة 

سيشاهد سطر الأوامر هذا ، كما في Sass ، كل تغيير للملف ، ويقوم بإنشاء أو تحديث ملفات CSS المقابلة. ولكن تذكر ، قم بتشغيل هذا السطر بعد الانتهاء من تكوين المشروع config.rb, وإلا سيتجاهل التغييرات في الملف.

CSS3 خلطات

قبل المشي من خلال CSS3 ، في الابتدائية لدينا .SCSS الملف ، نحن بحاجة إلى استيراد البوصلة مع السطر التالي import "البوصلة" ؛, سيؤدي هذا إلى استيراد جميع الملحقات في Compass. ولكن ، إذا كنا بحاجة إلى CSS3 فقط ، فيمكننا أيضًا القيام بذلك بشكل أكثر تحديدًا مع هذا الخط import "compass / css3".

قراءة متعمقة: بوصلة CSS3.

الآن ، لنبدأ في إنشاء شيء باستخدام Saas و Compass. في مستند HTML ، على افتراض أنك قمت بإنشاء واحد ، سنضع العلامات البسيطة التالية:

الفكرة بسيطة أيضا. سننشئ صندوقًا مستديرًا بأركان مستديرة ، وفي ما يلي أنماط Sass المتداخلة للمبتدئين ؛

 body background-color: # f3f3f3؛  قسم العرض: 500 بكسل ؛ الهامش: 50px auto 0؛ div عرض: 250 بكسل ؛ الارتفاع: 250 بكسل ؛ لون الخلفية: #ccc؛ الهامش: 0 السيارات ؛  

وللحصول على مستطيل الزوايا الدائرية ، يمكننا تضمين Compass CSS3 Mixins على النحو التالي ؛

 body background-color: # f3f3f3؛  قسم العرض: 500 بكسل ؛ الهامش: 50px auto 0؛ div عرض: 250 بكسل ؛ الارتفاع: 250 بكسل ؛ لون الخلفية: #ccc؛ الهامش: 0 السيارات ؛ تضمين @ دائرة نصف قطرها الحدود ؛  

هذه الحدود بين دائرة نصف قطرها سوف تولد Mixins جميع بادئات المتصفح ، وبشكل افتراضي ، سيكون نصف قطر الزاوية 5px. ولكن ، يمكننا أيضًا تحديد نصف قطر حاجتنا بهذه الطريقة تضمين @ دائرة نصف قطرها (10 بكسل) ؛ .

 قسم div عرض: 250 بكسل ؛ الارتفاع: 250 بكسل ؛ لون الخلفية: #ccc؛ الهامش: 0 السيارات ؛ -Wkkit-border-radius: 10px ؛ -Moz-border-radius: 10px ؛ -ms-border-radius: 10px؛ نصف قطرها: 10 بكسل ؛ دائرة نصف قطرها الحدود: 10px ؛  

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

 body background-color: # f3f3f3؛  قسم العرض: 500 بكسل ؛ الهامش: 50px auto 0؛ div عرض: 250 بكسل ؛ الارتفاع: 250 بكسل ؛ لون الخلفية: #ccc؛ الهامش: 0 السيارات ؛ تضمين @ دائرة نصف قطرها (10 بكسل) ؛ تضمين @ تدوير ؛  

هذا Mixins سيولد أيضًا تلك البادئات المملة للمورد وسيستغرق الدوران 45 درجة افتراضيًا. انظر CSS التي تم إنشاؤها أدناه.

 قسم div عرض: 250 بكسل ؛ الارتفاع: 250 بكسل ؛ لون الخلفية: #ccc؛ الهامش: 0 السيارات ؛ -Wkkit-border-radius: 10px ؛ -Moz-border-radius: 10px ؛ -ms-border-radius: 10px؛ نصف قطرها: 10 بكسل ؛ دائرة نصف قطرها الحدود: 10px ؛ - تحويل صفحات الويب: تدوير (45deg) ؛ -moz-convert: تدوير (45deg) ؛ -ms-convert: تدوير (45deg) ؛ تحويل -o: تدوير (45deg) ؛ تحويل: تدوير (45deg) ؛  

مساعدين البوصلة

واحدة من أقوى الميزات في Compass هي المساعدون. وفقا للموقع الرسمي, مساعِدات البوصلة هي الوظائف التي تزيد الوظائف التي توفرها ساس. حسنًا ، دعنا نلقي نظرة على الأمثلة التالية للحصول على صورة واضحة.

مضيفا @ الخط الوجه الملفات

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

 @ font-face font-family: "MyFont"؛ src: تنسيق url ('/ fonts / font.ttf') ('truetype') ، تنسيق url ('/ fonts / font.otf') ('opentype') ، تنسيق url ('/ fonts / font.woff') ('woff') ، تنسيق url ('/ fonts / font.eot') ('embent-opentype') ؛  

مع البوصلة يمكننا أن نفعل الشيء نفسه بسهولة أكبر مع الخط ملفات () المساعدين.

 include font-face ("MyFont" ، ملفات الخط ("font.ttf" ، "font.otf" ، "font.woff" ، "font.eot")) ؛ 

ستنشئ الشفرة أعلاه نتيجة تشبه تمامًا مقتطف الشفرة الأول ، كما ستكتشف تلقائيًا نوع الخط وإضافته إلى شكل() بناء الجملة.

ومع ذلك ، إذا ألقينا نظرة على الكود عن كثب ، فسترى أننا لم نقم بإضافة مسار الخط (/ الخطوط /). لذلك ، كيف عرفت كومباس أين توجد الخطوط؟ حسنًا ، لا تشعر بالارتباك ، فهذا المسار مشتق بالفعل config.rb مع fonts_path خاصية؛

 fonts_dir = "fonts" 

لذلك ، دعنا نقول إننا نغيره إلى fonts_dir = "myfonts", ثم سوف يكون رمز ولدت رابط ( '/ myfonts / font.ttf'). افتراضيًا ، عندما لا نقوم بتحديد المسار ، فإن Compass ستوجهه إلى الأنماط / الخطوط.

إضافة صورة

لنقم بإنشاء مثال آخر ، هذه المرة سنضيف صورة. تعد إضافة الصور عبر CSS أمرًا شائعًا. ونحن نفعل هذا عموما باستخدام الصورة الخلفية الممتلكات ، مثل ذلك ؛

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

في البوصلة ، بدلا من استخدام رابط () وظيفة ، يمكننا استبداله مع رابط الصورة() المساعدون وما شابه ذلك لإضافة @ الخط وجه أعلاه ، يمكننا تجاهل المسار تمامًا والسماح لـ Compass بمعالجة الباقي.

ستنشئ هذه الشفرة أيضًا نفس إعلان CSS بالضبط كما في المقتطف الأول.

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

بالإضافة إلى ذلك ، يحتوي Compass أيضًا على Image Dimension Helpers ، وهو يكتشف في المقام الأول عرض الصورة وارتفاعها ، لذلك في حال احتجنا إلى تحديدهما في CSS لدينا ، يمكننا إضافة سطرين آخرين ، على النحو التالي ؛

 div background-image: image-url ("images.png") ؛ width: image-width ("images.png")؛ الارتفاع: ارتفاع الصورة ("images.png") ؛  

سوف يصبح الإخراج شيء من هذا القبيل.

 div background-image: url ('/ img / images.png؟ 1344774650') ؛ العرض: 80 بكسل ؛ الارتفاع: 80 بكسل ؛  

قراءة متعمقة: وظائف مساعد البوصلة

الفكر النهائي

حسنًا ، لقد ناقشنا الكثير حول Compass اليوم وكما ترون إنها أداة قوية حقًا ودعونا نكتب CSS بطريقة أكثر أناقة.

وكما تعلمون بالفعل ، ليس ساس هو الوحيد المغلق المعالج. هناك أيضا القليل الذي ناقشناه بدقة من قبل. في المنشور التالي ، سنحاول مقارنة ، وجها لوجه ، أي واحد من هذين يؤدي المهمة بشكل أفضل في تجهيز CSS المسبق.

• تحميل المصدر