تثبيت SASS وإعداد بيئة العمل

تثبيت SASS وإعداد بيئة العمل

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

فهم Dart Sass: التطبيق الرسمي

قبل أن نقوم بتثبيت أي شيء، دعنا نوضح أي إصدار من SASS نقوم بتثبيته. كما ذكرنا في الدرس السابق، Dart Sass هو التطبيق الرسمي الأساسي لـ SASS الذي يتم صيانته من قبل الفريق الأساسي. لقد حل محل Ruby Sass (المهمل في عام 2020) وهو أسرع وأكثر قابلية للصيانة ومحدث بالكامل بأحدث ميزات SASS.

الطريقة الأولى: تثبيت SASS عبر npm (موصى بها)

الطريقة الأكثر شيوعاً والموصى بها لتثبيت Dart Sass هي من خلال npm (Node Package Manager). هذه الطريقة تعمل على Windows و macOS و Linux.

المتطلبات الأساسية

ستحتاج إلى تثبيت Node.js و npm على نظامك. تحقق مما إذا كانت لديك:

node --version
npm --version

إذا أرجعت هذه الأوامر أرقام إصدارات (مثل v18.16.0 لـ Node و 9.5.1 لـ npm)، فأنت جاهز للمتابعة. إذا لم يكن الأمر كذلك، قم بتنزيل وتثبيت Node.js من nodejs.org - يأتي npm مرفقاً معها.

التثبيت العام

لتثبيت SASS بشكل عام (متاح لجميع المشاريع على نظامك):

npm install -g sass

بعد اكتمال التثبيت، تحقق من أنه يعمل:

sass --version

يجب أن ترى شيئاً مثل: 1.69.5 compiled with dart2js 3.2.3

التثبيت الخاص بالمشروع (أفضل ممارسة)

للمشاريع الحقيقية، قم بتثبيت SASS كتبعية تطوير في مشروعك:

# انتقل إلى دليل مشروعك
cd my-project

# قم بتهيئة npm إذا لم تكن قد قمت بذلك بالفعل
npm init -y

# قم بتثبيت SASS كتبعية تطوير
npm install --save-dev sass

هذا ينشئ مجلد node_modules ويضيف SASS إلى ملف package.json الخاص بك تحت devDependencies. الآن أي شخص يستنسخ مشروعك يمكنه تثبيت جميع التبعيات (بما في ذلك SASS) باستخدام npm install بسيط.

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

الطريقة الثانية: تثبيت CLI المستقل

إذا كنت لا تريد استخدام npm، يمكنك تنزيل ملف Dart Sass التنفيذي المستقل مباشرةً:

1. قم بزيارة صفحة الإصدارات الرسمية على GitHub: github.com/sass/dart-sass/releases
2. قم بتنزيل الإصدار المناسب لنظام التشغيل الخاص بك (Windows أو macOS أو Linux)
3. قم باستخراج الأرشيف
4. أضف الملف التنفيذي sass إلى PATH الخاص بنظامك

إعداد VS Code لتطوير SASS

Visual Studio Code هو المحرر الأكثر شعبية لتطوير الويب، ولديه دعم ممتاز لـ SASS من خلال الإضافات. دعنا نقوم بإعداده للحصول على أفضل تجربة SASS.

إضافات VS Code الأساسية

1. Live Sass Compiler

تقوم هذه الإضافة تلقائياً بترجمة ملفات SCSS إلى CSS أثناء حفظها. إنها مريحة للغاية أثناء التطوير.

• افتح VS Code
• اذهب إلى الإضافات (Ctrl+Shift+X أو Cmd+Shift+X)
• ابحث عن "Live Sass Compiler" بواسطة Glenn Marks
• انقر على تثبيت

بمجرد التثبيت، سترى زر "Watch Sass" في شريط حالة VS Code. النقر عليه سيبدأ مراقبة ملفات SCSS للتغييرات.

2. SCSS IntelliSense

توفر هذه الإضافة إكمال تلقائي وتمييز للنحو والتنقل في الكود لـ SCSS.

• ابحث عن "SCSS IntelliSense" بواسطة mrmlnc
• انقر على تثبيت

3. SCSS Formatter

تنسيق كود SCSS تلقائياً للحصول على اتساق.

• ابحث عن "SCSS Formatter" بواسطة Sibiraj
• انقر على تثبيت

أول ترجمة SASS: سطر الأوامر

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

إنشاء ملف SCSS بسيط

أنشئ مجلداً جديداً لمشروع SASS الخاص بك وأضف ملفاً باسم styles.scss:

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;
  padding: 20px;

  h1 {
    font-size: 32px;
    margin-bottom: 10px;
  }
}

الترجمة إلى CSS

الآن دعنا نقوم بترجمة ملف SCSS هذا إلى CSS باستخدام سطر الأوامر:

sass styles.scss styles.css

يخبر هذا الأمر SASS: "خذ styles.scss كمدخل وأخرج styles.css."

بعد تشغيل هذا الأمر، سترى ملف styles.css جديد تم إنشاؤه:

body {
  font-family: Arial, sans-serif;
  background-color: #3498db;
  color: white;
  padding: 20px;
}
body h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

لاحظ كيف تم استبدال المتغير بقيمته، وتم ترجمة h1 المتداخل إلى body h1. هذا هو SASS في العمل!

وضع المراقبة: الترجمة التلقائية

تشغيل أمر الترجمة يدوياً بعد كل تغيير مُمل. هنا يأتي دور وضع المراقبة - ستقوم SASS تلقائياً باكتشاف تغييرات الملف وإعادة الترجمة.

sass --watch styles.scss:styles.css

الآن SASS تراقب styles.scss. في كل مرة تحفظ فيها تغييرات على هذا الملف، تعيد SASS تلقائياً إنشاء styles.css. سترى ناتجاً مثل:

Sass is watching for changes. Press Ctrl-C to stop.

Compiled styles.scss to styles.css.

لإيقاف المراقبة، اضغط على Ctrl+C في الطرفية.

مراقبة أدلة كاملة

في المشاريع الحقيقية، سيكون لديك ملفات SCSS متعددة. بدلاً من مراقبتها بشكل فردي، راقب أدلة كاملة:

sass --watch scss/:css/

هذا يخبر SASS: "راقب جميع الملفات في مجلد scss/ وأخرج CSS المترجمة إلى مجلد css/، مع الحفاظ على نفس بنية المجلد."

على سبيل المثال:

• scss/main.scss → css/main.css
• scss/components/button.scss → css/components/button.css

أنماط الإخراج: موسع مقابل مضغوط

يمكن لـ SASS إخراج CSS بتنسيقات مختلفة حسب احتياجاتك. النمطان الرئيسيان هما "موسع" (قابل للقراءة البشرية) و "مضغوط" (مُصغّر للإنتاج).

النمط الموسع (افتراضي)

النمط الموسع هو الافتراضي. ينتج CSS قابل للقراءة ومنسق جيداً:

.button {
  background-color: #3498db;
  padding: 10px 20px;
  border: none;
}

.button:hover {
  background-color: #2980b9;
}

النمط المضغوط (إنتاج)

النمط المضغوط يزيل المسافات البيضاء والتعليقات والأحرف غير الضرورية لتقليل حجم الملف:

.button{background-color:#3498db;padding:10px 20px;border:none}.button:hover{background-color:#2980b9}

للترجمة بنمط مضغوط:

sass --style=compressed styles.scss styles.min.css

خرائط المصدر: تصحيح CSS المترجمة

عندما تُترجم SCSS إلى CSS، يرى المتصفح ملف CSS فقط. إذا فحصت عنصراً في DevTools، سترى أرقام أسطر CSS، وليس أرقام أسطر SCSS الأصلية. هذا يجعل التصحيح صعباً.

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

يتم إنشاء خرائط المصدر افتراضياً

عند ترجمة SCSS، تنشئ SASS تلقائياً ملف .map:

sass styles.scss styles.css

# ينشئ هذا:
# - styles.css
# - styles.css.map

يتضمن ملف CSS تعليقاً يشير إلى خريطة المصدر:

/* محتوى CSS هنا */

/*# sourceMappingURL=styles.css.map */

تعطيل خرائط المصدر

إذا كنت لا تريد خرائط المصدر (على سبيل المثال، في الإنتاج)، استخدم علامة --no-source-map:

sass --no-source-map styles.scss styles.css

تنظيم بنية مشروع SASS

مع نمو مشروعك، يصبح التنظيم بالغ الأهمية. إليك بنية مجلد موصى بها لمشاريع SASS:

my-project/
├── scss/
│   ├── base/
│   │   ├── _reset.scss
│   │   ├── _typography.scss
│   │   └── _variables.scss
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   └── _navbar.scss
│   ├── layout/
│   │   ├── _header.scss
│   │   ├── _footer.scss
│   │   └── _grid.scss
│   ├── pages/
│   │   ├── _home.scss
│   │   └── _about.scss
│   └── main.scss
├── css/
│   └── main.css (مُنشأ)
└── index.html

يستورد ملف main.scss جميع الأجزاء (الملفات التي تبدأ بـ _):

// Base
@import 'base/variables';
@import 'base/reset';
@import 'base/typography';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';

// Components
@import 'components/buttons';
@import 'components/cards';
@import 'components/navbar';

// Pages
@import 'pages/home';
@import 'pages/about';

إضافة نصوص SASS إلى package.json

إذا قمت بتثبيت SASS عبر npm، أضف نصوصاً مريحة إلى package.json:

{
  "name": "my-project",
  "scripts": {
    "sass": "sass scss/main.scss css/main.css",
    "sass:watch": "sass --watch scss/:css/",
    "sass:build": "sass --style=compressed --no-source-map scss/main.scss css/main.min.css"
  },
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

الآن يمكنك تشغيل:

• npm run sass - ترجمة مرة واحدة
• npm run sass:watch - مراقبة التغييرات
• npm run sass:build - بناء CSS محسنة للإنتاج

مشاكل التثبيت الشائعة والحلول

المشكلة 1: "sass: command not found"

الحل: إذا قمت بالتثبيت عالمياً، تأكد من أن مجلد bin العالمي لـ npm في PATH الخاص بك. شغّل npm config get prefix لإيجاده، ثم أضف [prefix]/bin إلى PATH الخاص بك.

المشكلة 2: أخطاء الأذونات عند التثبيت العالمي

الحل: على macOS/Linux، قد تحتاج إلى sudo: sudo npm install -g sass. من الأفضل تكوين npm لاستخدام دليل تملكه بدون sudo.

المشكلة 3: node-sass القديمة بدلاً من Dart Sass

الحل: تأكد من أنك تقوم بتثبيت حزمة sass، وليس node-sass. الأخيرة مهملة.

# صحيح
npm install sass

# خطأ (مهمل)
npm install node-sass

الخلاصة

لديك الآن SASS مثبتة وتفهم طرقاً متعددة لترجمة SCSS إلى CSS! أنت تعرف كيفية استخدام وضع المراقبة للترجمة التلقائية، وكيفية اختيار أنماط الإخراج، وكيفية تنظيم مشاريع SASS بشكل احترافي.

في الدرس التالي، سنغوص في أساسيات صيغة SCSS ونكتب ملفات أنماط أكثر تعقيداً تعرض قوة SASS.