الابتداء مع ساس التثبيت والأساسيات

في هذا المنشور ، سنناقش CSS Preprocessor يسمى Sass أو صفحات أنماط رهيبة.

إذا كنت تتابع منشوراتنا السابقة على LESS ، فنحن على يقين من أنك على دراية بهذا المغلق المعالج. تعد كل من Sass و LESS من معالجات CSS التي تعمل في المقام الأول على توسيع الطريقة التي نؤلف بها عادي - ثابت - CSS بطريقة أكثر ديناميكية باستخدام لغات البرمجة مثل المتغيرات و Mixins والوظائف.

تثبيت ساس

قبل أن نتمكن من إنشاء ساس نحتاج إلى تثبيته. بنيت ساس على روبي. إذا كنت تعمل على نظام التشغيل Mac ، فستكون هناك فرص ، فقد قمت بالفعل بتثبيت Ruby. إذا كنت قد قمت بتثبيت روبي في ويندوز ، استخدم روبي المثبت.

بعد اكتمال التثبيت ، يمكنك الانتقال إلى Terminal (على Mac) أو في Command Prompt (في Windows) ثم كتابة سطر الأوامر التالي فيه:

على ماك.

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

على ويندوز.

 جوهرة تثبيت ساس 

في حالة نجاح التثبيت ، سيكون لديك الإشعار التالي في موجه الأوامر / الأوامر.

بعد ذلك ، نحتاج إلى تحديد أي دليل لمشاهدته Sass باستخدام الأمر التالي ؛

 ساس - ساعة المسار / ساس الدليل 

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

إذا كنا بحاجة إلى Sass لإنشاء الملفات في دليل محدد ، فيمكننا القيام بذلك بهذه الطريقة ؛

 sass - watch path / sass-directory: path / css-directory 

يمكننا أيضًا مشاهدة ملف محدد بدلاً من الدليل ، مع سطر الأوامر هذا ؛

 ساس - ساعة المسار / ساس الدليل / styles.css 

إذا نجح الأمر watch ، فسيظهر شيء مثل هذا الإشعار أدناه في موجه الأوامر الطرفية / الأوامر.

قراءة متعمقة: لصناعة السيارات في ترجمة ملفات ساس مع ساس 3

تطبيقات ساس

ومع ذلك ، إذا كنت تكره العمل من خلال موجه الأوامر أو الأوامر ، يمكنك استخدام بعض التطبيقات لساس. الخيار الحر هو الكشفية. إنه مبني على Adobe Air بحيث يمكن تشغيله على جميع أنظمة التشغيل (Windows و OSX و Linux).

ومع ذلك ، فإنه يعمل ببطء شديد كما ذكر البعض من قبل.

لذلك إذا لم يكن لديك الصبر على ذلك ، فهناك أيضًا بعض الخيارات المدفوعة. يختلف السعر لكل تطبيق ، ويبلغ سعر Compass.app 10 دولارات ، و Fire.app ، و 14 دولارًا ، و Codekit مقابل 25 دولارًا.

تسليط الضوء على رمز

على الرغم من أن Sass هو امتداد CSS بشكل أساسي ، إلا أن المحرر الحالي قد لا يقوم بتمييز بناء الجملة بشكل صحيح. لحسن الحظ ، هناك بالفعل بعض الحزم تقريبا لأي محرر كود لتمكين .ساس أو .SCSS تسليط الضوء على رمز.

إذا كنت تعمل مع Sublime Text 2 مثلما أفعل ، فيمكنك استخدام هذه الحزم ؛ Sublime Text HAML & Sass و Sublime Text 2 Sass Package ، ولأسهل طريقة ، يمكنك تثبيت إحدى هذه الحزم من خلال التحكم في الحزمة.

بالنسبة لمحرري الشفرات الآخرين ، انظر أدناه ، أو جرب غوغلينغ له.

• هذا البرنامج التعليمي عبارة عن درس تعليمي رائع حول العمل على Sass مع Dreamweaver
• ساس الوضع لكودا. ولكن ، يبدو أن هذا الوضع قد تم دمجه مع Coda اعتبارًا من الإصدار 2
• TextMate الرسمية SCSS حزمة
• اسبرسو السكر لساس
• حزم InType

ساس اللغة

تشترك Sass و LESS فعليًا ببعض اللغات الشائعة ، فيما يلي بعض منها.

المتغيرات

 $ color-base: # 000؛ العرض $: 100px ؛ 

الفرق الوحيد من متغيرات LESS هو أن المتغير في Sass يتم تعريفه بـ a $ إشارة.

قواعد التعشيش

 header width: 980px؛ الارتفاع: 80 بكسل ؛ nav ul style-style: none؛ الحشو: لا شيء ؛ الهامش: لا يوجد  li display: inline؛ زخرفة النص: لا شيء ؛  

الخلاطات والوظائف

 mixin border-radius ($ radius) -moz-border-radius: $ radius؛ -wkkit-border-radius: $ radius؛ -ms-border-radius: $ radius؛ نصف قطرها الحدود: نصف قطرها $.  

عمليات

 li width: $ width / 5 - 10px؛  

عبارة شرطية

 if light ($ color-base)> = 51٪ background-color: # 333333؛ else background-colour: #ffffff؛  

في أقل شيء ، قد تفعل شيئًا مشابهًا من خلال تعبير Guard ، الذي قمنا بتغطيته في هذا البرنامج التعليمي.

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

وهذا كل شيء. في المنشور التالي ، سنبدأ في استكشاف لغات Sass ورفيقها Compass. ترقب.