لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

منسق ومحسن SCSS / Sass

مطورنص

إعلان · يزيل؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · يزيل؟

مرشد

منسق ومحسن SCSS / Sass

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

كيف تستعمل

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

سمات

دعم التداخل في SCSS – يقوم بتنسيق المحددات المتداخلة بعمق بشكل صحيح، والمحددات الأصل ("&والقواعد المتداخلة مثل @media و @supports.
معالجة المتغيرات والميكسات – يقوم بتنسيق متغيرات SCSS بشكل صحيح ("$variable), @mixin, @include, @extend, @use، و @forward التوجيهات.
ثلاثة أوضاع للإخراج – موسّع (تعريف واحد لكل سطر، قابل للقراءة بالكامل)، مضغوط (قاعدة واحدة لكل سطر)، ومصغّر (تم تجريد كافة المسافات البيضاء للإنتاج).
مسافة بادئة قابلة للتكوين – اختر بين مسافتين، 4 مسافات، أو علامات جدولة.
خيارات نمط الأقواس – وضع القوس الافتتاحي في نفس السطر أو السطر التالي.
تطبيع المسافات البيضاء – تباعد متسق بعد النقطتين الرأسيتين، وقبل الأقواس، وبين كتل القواعد.
التنسيق في الوقت الفعلي – يتم تحديث المخرجات على الفور أثناء الكتابة أو تغيير أي خيار.

متى تستخدم هذه الأداة

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

إعلان · يزيل؟

 التعليمات

ما الفرق بين SCSS و Sass؟

SCSS (Sassy CSS) و Sass هما صيغتان لنفس المعالج المسبق. يستخدم SCSS الأقواس المعقوفة والفواصل المنقوطة مثل CSS العادي - أي CSS صالح هو أيضًا SCSS صالح. تستخدم صيغة Sass ذات المسافات البادئة المسافات البادئة بدلاً من الأقواس والأسطر الجديدة بدلاً من الفواصل المنقوطة. SCSS أكثر شيوعًا بكثير لأنه مألوف لمطوري CSS وأسهل في الاعتماد التدريجي. تستخدم معظم المشاريع الحديثة امتداد الملف .scss.
ما هي متغيرات SCSS ولماذا تستخدمها؟

تخزن متغيرات SCSS (المعرفة بـ $) القيم القابلة لإعادة الاستخدام مثل الألوان، وأحجام الخطوط، والتباعد، ونقاط التوقف. على سبيل المثال، يتيح لك $primary-color: #3498db؛ الرجوع إلى نفس اللون في جميع أنحاء ورقة الأنماط الخاصة بك وتغييره في مكان واحد. في حين أن خصائص CSS المخصصة (--variable) توفر الآن وظائف مماثلة بشكل أصلي، فإن متغيرات SCSS هي قيم وقت التصريف التي تمكن ميزات أقوى مثل الاستيفاء في المحددات والعمليات الحسابية.
ما هو تداخل SCSS ومتى يجب استخدامه؟

يتيح لك تداخل SCSS كتابة محددات فرعية داخل محددات أصل، مما يعكس بنية HTML الخاصة بك. على سبيل المثال، .nav { .item { color: blue; } } يتم تجميعها إلى .nav .item { color: blue; }. يحسن التداخل من قابلية القراءة للأنماط ذات الصلة، ولكن الإفراط في التداخل (أكثر من 3-4 مستويات عمق) ينشئ محددات محددة للغاية يصعب تجاوزها. القاعدة العامة: تداخل للبنية، وليس لكل علاقة أصل-ابن.
ما الفرق بين @mixin و @extend في SCSS؟

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