ساس أفضل الممارسات نصائح وأدوات للمطورين

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

لقد بحثت في شبكة الإنترنت وجمعت هذه المادة من أفضل الممارسات لكتابة التعليمات البرمجية القابلة للتوسيع وقابلة لإعادة الاستخدام. الاقتراحات مأخوذة من آرائي الخاصة ومن مواقع موثوق بها مثل Sass Guidelines.

أنت بالتأكيد لا تحتاج إلى تنفيذ كل هذه الميزات في سير عملك. لكن الأمر يستحق على الأقل التفكير في هذه الأفكار والتأمل في الفوائد المحتملة.

تنظيم الملفات

أفضل مكان للبدء بتطوير Sass هو تنظيم الملفات. إذا كنت بالفعل في كود موحد ، فعليك أن تفهم قيمة الواردات والأجزاء الجزئية (المزيد في وقت لاحق).

لكن الآن ، ألقِ نظرة على مثال بنية الملف هذا من DoCSSa. لقد قمت بإعادة إنشاء هيكل الملف هذا والذي يمكنك رؤيته أدناه:

هذا مجرد اقتراح وهو أحد الطرق الكثيرة التي يمكنك بها تنظيم ملفاتك. يمكنك العثور على طرق أخرى تستخدم هياكل مجلدات مختلفة مثل “غلوبالس” ل SCSS على نطاق الموقع و “صفحات” SCSS الخاصة بالصفحة.

دعنا نسير عبر هذا النمط التنظيمي المقترح لفحص الغرض من كل مجلد:

• / غلوبالس - يحتوي على ملفات Sass التي يتم تطبيقها على مستوى الموقع مثل الطباعة والألوان والشبكات
• / مكونات - يحتوي على ملفات Sass مع أنماط مكون مثل الأزرار أو الجداول أو حقول الإدخال
• / الأقسام - يحتوي على ملفات Sass مخصصة لصفحات أو مساحات محددة على الصفحة (قد تعمل بشكل أفضل في المجلد / components / المجلد)
• / تيلس - يحتوي على أدوات مساعدة خارجية مثل Normalize والتي يمكن تحديثها ديناميكيًا باستخدام أدوات مثل Bower.
• main.scss - ملف Sass الأساسي في المجلد الجذر الذي يستورد جميع الآخرين.

هذه مجرد نقطة انطلاق أساسية وهناك متسع كبير للتوسع بأفكارك الخاصة.

ولكن بغض النظر عن الطريقة التي تختار بها تنظيم SCSS ، فمن الأهمية بمكان أن تقوم بذلك لدينا بعض التنظيم مع ملف منفصل (أو مجلد) للمكتبات ، مثل Normal Normal ، التي تحتاج إلى تحديث ، بالإضافة إلى مكونات في Sass subs لمشروعك.

ساس جزئي هي حيوية لأفضل الممارسات الحديثة. يوصى به بشدة فريق التصميم في Zurb والعديد من مطوري الواجهة المحترفين الآخرين.

إليك اقتباس من موقع Sass يوضح فيه الأجزاء:

“يمكنك إنشاء ملفات Sass جزئية تحتوي على مقتطفات صغيرة من CSS يمكنك تضمينها في ملفات Sass الأخرى. هذه هي طريقة رائعة ل قم بتنظيم CSS الخاص بك وساعد في الحفاظ على الأمور أسهل. الجزئي هو ببساطة ملف Sass باسم تسطير أسفل السطر. قد تسميته شيء من هذا القبيل _partial.scss. يتيح تسطير أسفل السطر معرفة Sass أن الملف ليس سوى ملف جزئي وأنه لا يجب إنشاؤه في ملف CSS. ساس جزئية تستخدم مع @استيراد توجيهات.”

انظر أيضًا إلى هذه المنشورات الأخرى المتعلقة ببنية ملف Sass:

• كيف يمكنني هيكلة مشاريعي ساس
• الجمالية ساس: تنظيم العمارة والأناقة
• دليل الهياكل التي تساعدك على الحفاظ على التعليمات البرمجية الخاصة بك

استراتيجيات الاستيراد

لا يكفي أن نقول عن قيمة ساس الاستيراد والأجزاء. منظمة الرمز هي مفتاح الحصول على بنية الاستيراد وسير العمل التي تعمل فقط.

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

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

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

mixin linearGradient ($ top، $ bottom) background: $ top؛ / * المتصفحات القديمة * / الخلفية: - التدرج اللوني الخطي (أعلى ، $ أعلى 0٪ ، $ أسفل 100٪) ؛ / * FF3.6 + * / background: - تدرج الويب - (خطي ، أعلى يسار ، أسفل اليسار ، توقف لون (0٪ ، $ top) ، لون توقف (100٪ ، $ سفلي)) ؛ / * Chrome ، Safari4 + * / background: -webkit-gradient-gradient (top، $ top 0٪، $ bottom 100٪)؛ / * Chrome10 + ، Safari5.1 + * / / background: -o-linear-gradient (top، $ top 0٪، $ bottom 100٪)؛ / * Opera 11.10+ * / background: -ms-linear-gradient (top، $ top 0٪، $ bottom 100٪)؛ / * IE10 + * / background: التدرج الخطي (إلى الأسفل ، أعلى $ 0٪ ، $ 100٪ السفلي) ؛ / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff"، endColorstr = "# 000000"، GradientType = 0)؛ / * IE6-9 * /

يأخذ mixin قيمتين: اللون العلوي واللون السفلي. يمكنك كتابة مزيج مختلف لأنواع مختلفة من التدرجات التي تتضمن 3 أو 4 ألوان مختلفة. هذا يسمح لك باستيراد واستنساخ كود mixin أثناء تغيير المعلمات للخيارات المخصصة.

المثال من Code Responsible يبدو كما يلي:

.button include linearGradient (#cccccc، # 666666)؛ 

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

بينما يحتوي Sass على طريقة واحدة فقطimport ، فقد قمت بتضمين mixins وعناصر نائبة لإظهار مرونة الشفرة التي يمكن كتابتها في ملف واحد ولكن يتم تضمينها في أي مكان.

عند إنشاء بنية استيراد ، فقط تذكر اتباع مفاهيم ترميز DRY (لا تكرر نفسك).

اصطلاحات التسمية

تنطبق القواعد العامة لأصطلاحات التسمية على المتغيرات والوظائف والخلطات. عند تسمية أي شيء في Sass ، يوصى بذلك استخدام جميع الحروف الصغيرة مع شرطات للفصل.

يعتمد بناء جملة Sass code على مجموعة قواعد إرشادات CSS. فيما يلي بعض أفضل الممارسات الموصى بها لتذكرها:

• مسافات بادئة (2) ، بدون علامات تبويب
• من الناحية المثالية ، خطوط واسعة 80 حرفا أو أقل
• الاستخدام الهادف للمساحات البيضاء
• استخدم التعليقات لشرح عمليات CSS

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

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

المشكلة هي أن BEM لا يتحرك جيدًا لمتغيرات Sass أو الخليط لأنهم لا يملكون بنية block / element / modifier (BEM). أنا شخصياً أفضل استخدام اصطلاحات تسمية Sass ولكن يمكنك تجربة أي شيء من camelCase إلى بناء الجملة الداخلي الخاص بك.

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

على سبيل المثال ، لتغيير لون الرابط ، يمكنك فتح ملف المتغيرات الخاص بك (ربما _variables.scss) وحدد موقع لمتغيرات اللون. ثم ابحث عن الرابط حسب الاسم (رابط الرأس ، رابط النص ، إلخ) وقم بتحديث اللون. بسيط!

للحصول على فكرة حول كيفية إنشاء جدول محتويات لملفات Sass ، تحقق من ملف إعدادات المؤسسة.

 // Foundation for Sites Settings // ----------------------------- // // Table of Contents: // // 1 العالمية // 2. نقاط التوقف // 3. الشبكة // 4. الطباعة الأساسية // 5. مساعدو الطباعة ... // 1. العالمية // --------- $ global-font-size: 100 ٪، $ العرض العالمي: rem-calc (1200) ؛ $ خط عالمي: 1.5؛ // الخ

ممارسة تسمية أخرى تتعلق نقاط توقف استجابة. عند تسمية نقاط التوقف Sass ، حاول تجنب الأسماء الخاصة بالجهاز. من الأفضل أن تكتب أسماء صغيرة مثل med و lg و xlg لأنها بالنسبة لبعضهم البعض.

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

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

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

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

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

هذه التقنيات ساس مختلفة جدا في العمل ، ولكن كلاهما لديه القدرة على الإساءة إذا لم تستخدم بشكل كبير.

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

body div.content div.container … body div.content div.conticer div.articles … body div.content div.container div.articles> div.post … 

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

عند استخدام دليل SitePoint ، ستجد ثلاث قواعد ذهبية للتداخل:

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

يقترح المطور Josh Broton تداخلًا عند الضرورة ، ضع مسافة بادئة في الباقي كقاعدة بناء جملة عامة.

لا يؤدي تحديد المسافة البادئة إلى محدداتك إلى أي تأثيرات متتالية لـ CSS. ولكن سيكون لديك وقت أسهل لتخطي ملف Sass الخاص بك لتحديد الفئات التي ترتبط ببعضها البعض.

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

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

/ * Sass code * /for $ i من 1 إلى 8 $ width: النسبة المئوية (1 / $ i) .col - # $ i width: $ width؛  / * output * / .col-1 width: 100٪؛ .col-2 width: 50٪؛ .col-3 width: 33.333٪؛ .col-4 width: 25٪؛  .col-5 width: 20٪؛ .col-6 width: 16.666٪؛ .col-7 width: 14.285٪؛ .col-8 width: 12.5٪؛

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

الحلقات ينبغي ليس يمكن استخدامها لتكرار محددات أو خصائص محدد. هذا ما mixins ل.

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

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

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

إذا كنت مرتبكًا أو تريد ملاحظات حول حلقات التداخل أو حلقات Sass ، فيجب عليك نشر سؤال في إما / r / sass / أو / r / css / ، في مجتمعات Reddit النشطة مع مطوري Sass ذوي المعرفة الواسعة.

البنيوية

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

الفكرة وراء Sass modular هي كتابة ملفات SCSS فردية بهدف محدد يستهدف المحتوى العام (الطباعة ، الشبكات) أو عناصر الصفحة (علامات التبويب ، النماذج).

تعريف الوحدة النمطية Sass واضح جدًا ويقدم اقتراحًا محددًا للغاية: يجب أن لا يؤدي استيراد الوحدة النمطية إلى إخراج رمز.

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

ومع ذلك ، تقترح مقالة Sass Way كتابة جميع المحددات كخليط ودعوتهم فقط عند الحاجة. سواء كنت تعتمد هذا أم لا ، فهذا هو اختيارك. أعتقد أن ذلك يعتمد على حجم المشروع وراحتك مع التعامل مع الخلطات.

نقلا عن جون لونغ من منصبه على طريقة ساس:

“بالنسبة لي ، أصبحت الوحدات الوحدات الأساسية أو اللبنات الأساسية لمشاريع Sass الخاصة بي.”

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

بالإضافة إلى أنه من الأسهل بكثير نسخ الوحدات النمطية من مشروع إلى آخر عندما تكون موجودة في ملفات منفصلة. المرونة و رمز قابلة لإعادة الاستخدام هي حجر الزاوية للتنمية وحدات.

لمعرفة المزيد حول وحدات Sass وتقنيات القياس ، راجع هذه المنشورات:

• وحدات CSS: مرحبًا بك في المستقبل
• إيجابيات وسلبيات وحدات ساس
• منظمة وحدات CSS مع SMACSS & SASS

البحث عن سير العمل المثالي

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

ضع في اعتبارك أيضًا استخدام Gulp أو Grunt لأتمتة المشروع وتقليل الكود. سيوفر هذا الكثير من أدوات التشغيل الآلي والأتمتة الآن بلا شك جزءًا من أفضل الممارسات لتطوير الواجهة الأمامية الحديثة.

تخطي المكتبات المفتوحة المصدر مثل SCSS's Foundation على GitHub لمعرفة المزيد حول أفضل الممارسات التي تستخدمها المكتبات الأخرى.

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

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

ويهدف ساس لتعزيز تجربة تطوير CSS ، لذلك العمل بكل وضوح وأفضل الممارسات للحصول على أفضل تجربة ممكنة.

يتم إحتوائه

يمكن تصحيح الازدحام في سير عمل Sass من خلال تغيير أنماط الأكواد واتباع أفضل الممارسات. لقد أوجزنا عددًا قليلاً من الاقتراحات في هذا المنشور المقدمة من مدونات Sass والمطورين المحترفين.

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

تحقق من هذه الروابط للعثور على مزيد من النصائح وأفضل الممارسات لتطوير Sass:

• المبادئ التوجيهية ساس
• رؤية لساس لدينا
• 8 نصائح لمساعدتك في الحصول على أفضل ما في ساس
• تمديد في ساس دون خلق فوضى
• Sass Best Practices - تداخل أكثر من 3 مستويات عميقة