مقدمة إلى SCSS وSASS

يُعتبر SASS أحد أشهر أدوات تصميم الويب التي تُمكِّن المطورين من كتابة CSS بطريقة أكثر تنظيماً وفعالية. SCSS هو أحد صيغ SASS ويمثل الامتداد الجمالي للغة CSS التقليدية. يمكن للمطورين استخدام SCSS لتحسين وتيرة العمل وتبسيط عملية تطوير تصميمات الويب.

كيفية إنشاء ملف SCSS

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

// ملف SCSS بسيط
    $primary-color: #3498db;
    body {
      background-color: $primary-color;
    }

تحويل SCSS إلى CSS باستخدام SASS

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

sass input.scss output.css

سيؤدي هذا الأمر إلى تحويل محتوى ملف “input.scss” إلى “output.css”. الآن يمكنك استخدام ملف CSS الناتج في مشروع الويب الخاص بك.

أمثلة على استخدام متقدم لـ SCSS

يمكنك الاستفادة من وظائف SCSS المتقدمة مثل التداخل والمزايا المتغيرة لتبسيط التعليمات البرمجية. يسمح التداخل بكتابة CSS أكثر تنظيماً بينما توفر المتغيرات طريقة لإعادة استخدام القيم عبر أنماط متعددة.

// استخدام التداخل
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
    }

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