يجب أن تحصل على 9 مكتبات Mixin لمصممي Sass

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

هناك العديد من الخلاطات مصنوعة من قبل المطورين ، لمساعدتك عند العمل مع ساس في التنمية الخاصة بك. معظم الأشياء التي تغطي في كثير من الأحيان المتكررة في CSS. من عند التكيف عبر متصفحات متعددة إلى إنشاء الأزرار والرسوم المتحركة والآثار الانتقالية, ابحث عن هذا والمزيد في مكتبات mixin الـ 11 التالية التي يجب أن تحصل عليها لتطوير Sass.

1. بوربون

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

تحقق من الوثائق كاملة لاستخدام كل mixin وظيفة المتاحة.

2. ساس CSS3 الخلطات

توفر Sass CSS3 Mixins مزيجًا يعمل عبر متصفحات مختلفة. ستجد مجموعة من أفضل المزج بين أفضل الممارسات هنا مثل الخلفية والحدود والمربع والعمود ووجه الخط والتحويل والانتقال والرسوم المتحركة. يكفي لاحتياجات التصميم الخاصة بك. لاستخدام ، استيراد CSS3-mixins.scss واتصل على mixin في صف CSS الخاص بك.

تحميل هذا mixin هنا.

3. CssOwl

يوفر CssOwl مزيجًا مفيدًا لتعيين موضع عنصر (نسبي أو مطلق) وإضافة محتوى باستخدام محدد الزائفة ( :بعد و :قبل). كما أنه يساعدك عندما تريد إنشاء عناصر sprite: يمنح mixin المرونة لتعيين موضع الصورة في sprite الخاص بك. بالإضافة إلى Sass ، تتوفر مكتبة mixer CssOwl أيضًا لأقل و Stylus.

4. نقطة توقف ساس

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

5. سكوت

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

6. الزعفران

مع Saffron ، يمكنك إضافة الرسوم المتحركة CSS3 والانتقالات بكل سهولة. هناك العديد من الرسوم المتحركة والانتقالات المتاحة ، بما في ذلك التلاشي داخل / خارج ، الانزلاق داخل / خارج ، الارتفاع داخل / خارج وكذلك الآثار المتنوعة مثل اهتزاز ، وعيار ، ترتد ، وغيرها. لاستخدام Saffron ، قم فقط بتضمين mixin في إعلان Sass ، واتصل باسم التأثير داخل صف CSS الخاص بك. يمكنك الحصول على Saffron عن طريق تثبيته باستخدام Bower أو Gem ، أو مجرد تنزيله يدويًا من Github.

7. اكتب الإعدادات

TypeSettings هو نوع من مجموعة أدوات Sass. سيتم تعيين حجم الخط في مقياس وحدات باستخدام em (بدلاً من rems أو بكسل) ، والإيقاع العمودي ، وعناوين العناوين القائمة على نسبة استجابة. يمكنك تثبيت هذا البرنامج باستخدام Bower أيضًا ، أو تنزيل الإصدار ، أو استنساخ الريبو. لمزيد من التفاصيل ، راجع صفحتها.

8. ساس لاين

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

اذهب هنا للحصول على مزيد من التفاصيل حول كيفية استخدامها.

9. اندي

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