دليل بسيط وسهل لفهم ساس

منذ فترة طويلة ، كتب Thoriq Firdaus مقالة رائعة حول البدء مع Sass والتي أوضحت لك كيفية تثبيت واستخدام هذه لغة المعالج CSS المفيدة للغاية (قد ترغب في التحقق من ذلك ، كما تعلمون ، للبدء).

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

• أدوات التجارة
• المتغيرات
• التعشيش
• تمديد القواعد
• Mixins
• محددات العنصر النائب
• عمليات
• المهام

أدوات التجارة

أظهر لك Thoriq كيف يمكنك استخدام Sass من سطر الأوامر باستخدام ساس ووتش أمر.

إذا كنت تفضل أدوات واجهة المستخدم الرسومية ، فيمكنك استخدام تطبيقي الشخصي المفضل ، Codekit ، وهو أداة لمطور الويب لتجميع Sass ، وسَلسَلة ، وإصلاح تلقائي ، وغير ذلك الكثير. يعد Prepros تطبيقًا آخر قادرًا للغاية والذي يمكن استخدامه على جميع الأنظمة. كلاهما التطبيقات المدفوعة ولكن تستحق ذلك إذا كنت ستستخدمها على المدى الطويل.

إذا كنت ترغب فقط في تجربة ساس دون دفع ثمن أي شيء يمكنك استخدام الجهاز ، أو Koala (فيما يلي مراجعتنا) ، وهو تطبيق مجاني غني بالميزات عبر الأنظمة الأساسية ، والذي يمكن أن يثبت موقفه أمام نظرائه المتميزين.

المتغيرات

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

 $ primary_color: # 666666؛ .button color: $ primary_color؛  .important color: $ primary_color؛  

قد لا يبدو هذا مفيدًا هنا ، ولكن تخيل وجود 3000 سطر من التعليمات البرمجية. إذا تغير نظام الألوان الخاص بك ، فستحتاج إلى استبدال كل قيمة لونية في CSS. مع ساس يمكنك فقط تعديل القيمة من $ primary_color متغير ويتم ذلك معها.

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

التعشيش

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

 #header nav / * قواعد منطقة التنقل * / #header nav ul / * قواعد القائمة * / #header nav li / * قواعد عناصر القائمة * / #header nav a / * Rules للروابط * / 

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

إليك كيف يمكن أن يظهر الرمز أعلاه في Sass:

 #header nav / * قواعد منطقة التنقل * / ul / * قواعد القائمة * / li / * قواعد عناصر القائمة * / a / * قواعد الروابط * / 

التعشيش مفيد للغاية لأنه يجعل أوراق الأنماط (كثيرًا) أكثر قابلية للقراءة. باستخدام التداخل مع المسافة البادئة المناسبة يمكنك تحقيقه هياكل رمز واضح للغاية, حتى لو كان لديك قدر لا بأس به من التعليمات البرمجية.

عيب واحد من التعشيش هو أنه يمكن يؤدي إلى خصوصية لا لزوم لها. في المثال أعلاه أشرت إلى الروابط مع #header nav. يمكنك أيضا استخدام #header nav ul li a والتي من المحتمل أن تكون أكثر من اللازم.

في Sass ، من الأسهل أن تكون محددًا جدًا لأن كل ما عليك فعله هو توحيد قواعدك. ما يلي هو أقل بكثير للقراءة ومحددة تماما.

 #header nav / * قواعد منطقة التنقل * / ul / * قواعد القائمة * / li / * قواعد عناصر القائمة * / a / * قواعد الروابط * / 

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

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

 .زر عرض: كتلة مضمنة ؛ اللون: # 000 ؛ الخلفية: # 333؛ الحدود بين دائرة نصف قطرها: 4PX. الحشو: 8px 11px.  .button-primary extend .button؛ خلفية: # 0091C2. زر صغير extend .button؛ FONT-SIZE: 0.9em. الحشو: 3px 8px ؛  

ال .زر الابتدائي و .زر صغير الطبقات جميع تمديد .زر فئة مما يعني أنهم يأخذون جميع خصائصه ومن ثم تحديد الخاصة بهم.

هذا مفيد للغاية في العديد من الحالات حيث يمكن استخدام أشكال مختلفة من عنصر. الرسائل (التنبيه / النجاح / الخطأ) ، الأزرار (الألوان ، الأحجام) ، أنواع القوائم ، إلخ ، يمكن أن تستخدم جميعها وظائف التمديد لتحقيق كفاءة CSS رائعة.

واحد التحذير من يمتد هو أن لن يعملوا في استفسارات الوسائط كما تتوقع. هذا أكثر تقدماً قليلاً ولكن يمكنك قراءة كل شيء عن هذا السلوك في فهم محددات العنصر النائب - محددات العنصر النائب هي نوع خاص من الامتداد سنتحدث عنه قريبًا.

Mixins

Mixins هي ميزة أخرى مفضلة للمستخدمين preprocessor. Mixins هي قواعد قابلة لإعادة الاستخدام - مثالية للقواعد الخاصة بالمورد أو لتقصير قواعد CSS الطويلة.

ماذا عن إنشاء قاعدة انتقال لعناصر التحويم:

 mixing hover-effect -webkit-الانتقالية: 200ms لون الخلفية؛ الانتقال -moz: لون الخلفية 200ms؛ - الانتقال: 200ms لون الخلفية. الانتقال: 200ms لون الخلفية.  include hover-effect؛ . زر include hover-effect؛  

يتيح لك Mixins أيضًا استخدام المتغيرات تحديد القيم داخل mixin. يمكننا إعادة كتابة المثال أعلاه إلى تعطينا السيطرة على الوقت المحدد للانتقال. قد نرغب في أن تنقل الأزرار أبطأ قليلاً على سبيل المثال.

 mixin hover-effect ($ speed) -webkit-الانتقالية: background-colour $ speed؛ الانتقال -moz: الخلفية لون الخلفية السرعة. انتقال -o: سرعة لون الخلفية $ ؛ الانتقال: الخلفية لون السرعة دولار.  include hover-effect (200ms) ؛  .button include hover-effect (300ms)؛  

محددات العنصر النائب

تم تقديم محددات العنصر النائب مع Sass 3.2 وحل المشكلة التي قد تتسبب في حدوث بعض الشيء في كود CSS الذي تم إنشاؤه. ألقِ نظرة على هذا الرمز الذي ينشئ رسائل خطأ:

 .message font-size: 1.1em؛ الحشو: 11px؛ الحدود بين العرض: 1PX. على غرار الحدود: الصلبة.  .message-risk extend .message؛ الخلفية: # C20030 ؛ اللون: # الاتحاد الفرنسي. لون الحدود: # A8002A ؛  .message-success extend .message؛ الخلفية: # 7EA800 ؛ اللون: # الاتحاد الفرنسي. لون الحدود: # 6B8F00 ؛  

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

 ٪ message font-size: 1.1em؛ الحشو: 11px؛ الحدود بين العرض: 1PX. على غرار الحدود: الصلبة.  .message-risk extend٪ button؛ الخلفية: # C20030 ؛ اللون: # الاتحاد الفرنسي. لون الحدود: # A8002A ؛  .message-success extend٪ button؛ الخلفية: # 7EA800 ؛ اللون: # الاتحاد الفرنسي. لون الحدود: # 6D9700 ؛  

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

عمليات

من الصعب مقاومة التورية هنا ، لكنني سأمتنع عن النكات الطبية في الوقت الحالي. يتيح لك المشغلون القيام ببعض الرياضيات في كود CSS ويمكن أن يكونوا مفيدين للغاية. المثال في دليل Sass مثالي لعرض هذا:

 .حاوية العرض: 100 ٪ ؛  المقال float: left؛ العرض: 600 بكسل / 960 بكسل * 100٪ ؛  جانبا float: right؛ العرض: 300 بكسل / 960 بكسل * 100٪ ؛  

المثال أعلاه بإنشاء نظام شبكة 960 بكسل مع الحد الأدنى من المتاعب. سيتم تجميعها بشكل جيد إلى CSS التالي:

 .حاوية العرض: 100 ٪ ؛  المقال float: left؛ العرض: 62.5 ٪ ؛  جانبا float: right؛ العرض: 31.25 ٪ ؛  

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

 $ primary: # 7EA800؛ .message-success extend٪ button؛ الخلفية: $ الابتدائي ؛ اللون: # الاتحاد الفرنسي. لون الحدود: $ Primary - # 111؛  

أخف وزنا اللون المخصوم ، وأكثر قتامة الظل الناتج سيكون. أخف وزنا اللون المضافة ، وأخف وزنا الظل الناتجة.

المهام

هناك عدد كبير من الوظائف التي يجب استخدامها: وظائف الرقم ، وظائف السلسلة ، وظائف القائمة ، وظائف اللون وأكثر من ذلك. ألق نظرة على القائمة الطويلة في وثائق المطور. سوف نلقي نظرة على زوجين هنا فقط لأريك كيف تعمل.

ال التخفيف و ظلم وظيفة يمكن استخدامها لتغيير خفة اللون. هذا أفضل من طرح الظلال ، فهو يجعل كل شيء أكثر حدة ووضوحًا. ألقِ نظرة على مثالنا السابق باستخدام وظيفة التغميق.

 $ primary: # 7EA800؛ .message-success extend٪ button؛ الخلفية: $ الابتدائي ؛ اللون: # الاتحاد الفرنسي. لون الحدود: أغمق ($ أساسي ، 5) ؛  

الوسيطة الثانية للدالة هي النسبة المئوية للسواد المطلوب. جميع وظائف لها المعلمات. نلقي نظرة على الوثائق لمعرفة ما هي! فيما يلي بعض وظائف الألوان التي لا تحتاج إلى شرح: التشبع, ارتوى, عكس, الرمادي.

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

 .العنوان font-size: ceil ($ head_size * 1.3314) ؛  

نظرة عامة

تمنحك الميزات الموجودة في Sass قوة كبيرة لكتابة CSS أفضل مع جهد أقل. الاستخدام السليم للخلطات والتمديدات والوظائف والمتغيرات سيجعل صفحات الأنماط الخاصة بنا أكثر قابلية للمحافظة عليها وأكثر قابلية للقراءة وأسهل في الكتابة.

إذا كنت مهتمًا بمعالج CSS آخر مماثل ، أقترح إلقاء نظرة على LESS (أو راجع دليل المبتدئين) - المبدأ الأساسي هو نفسه!