SASS: الدليل النهائي لتطوير الويب في العصر الحديث

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

ما هو معالج CSS المسبق؟

المعالج المسبق لـ CSS هو في الأساس لغة برمجة نصية ستحول كود CSS مع اختلافات بسيطة في بناء الجملة إلى CSS3 عادي. في حالة Sass ، هذا نص مكتوب في الأصل بلغة Ruby ، ​​على الرغم من وجود منافذ متاحة باستخدام لغات أخرى مثل JavaScript ، عبر Node.js.

كيف تبدأ مع Sass

هناك العديد من الخيارات المختلفة لاستخدام Sass. في سطر الأوامر ، توجد خيارات لاستخدام جوهرة روبي الأصلية ، ملف منفذ Node.js، أو استخدام متسابقي المهام مثل Gulp أو Grunt. إذا كنت تفضل استخدام واجهة المستخدم الرسومية ، فإن العديد من التوصيات تشمل Compass أو CodeKit أو Hammer.

ما تفعله كل هذه البرامج هو أخذ كود Sass من ورقة أنماط واحدة (ملف .sass or .scss file) ، ثم تجميعها في ملف .css ملف. هناك إيجابيات وسلبيات لكل خيار ، ولكن إذا لم تكن متأكدًا من مكان البدء ، فسيكون أحد برامج واجهة المستخدم الرسومية مكانًا جيدًا للبدء.

المتغيرات

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

$ mainColor: # dbcbb4 ؛

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

التعشيش

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

.container {width: 800px؛ } .container h1 {font-size: 40px؛ }

يمكنك ببساطة الكتابة:

.container {width: 800px؛ h1 {حجم الخط: 40 بكسل ؛ }}

وظائف

يحتوي Sass على العديد من الوظائف المضمنة ، والتي تسمح بالتلاعب الفعلي في كود CSS. هنا ليست سوى أمثلة قليلة:

امزج لونين معًا:

مزيج (اللون الأساسي دولار ، اللون الثاني دولار)

اجعل اللون أغمق (حيث $amount هي قيمة مقدار تعتيمها):

أغمق ($ color، $ amount)

الرياضيات

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

شيء واحد يجب ملاحظته هو أنه لا يمكنك خلط وحدات القيمة. لذلك بينما ما يلي صحيح:

ارتفاع القائمة $: 100٪ - 20٪ ؛

لن يكون ما يلي ممكنًا:

ارتفاع القائمة $: 100٪ - 40px؛

بعض حالات الاستخدام الشائعة لـ Sass

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

ميكسين

مع مستويات مختلفة من دعم المستعرض لخصائص CSS المختلفة ، من الشائع أن تضطر إلى توفير بادئات بائع مختلفة للخصائص ، من أجل ضمان التوافق عبر المستعرضات (خاصة عندما يكون دعم Internet Explorer ضروريًا):

p {
  تحويل -webkit: مقياس (2) ؛ 
      -ms- تحويل: مقياس (2) ؛
          تحويل: مقياس (2) ؛
}

 

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

باستخدام رمز transform الخاصية أعلاه كمثال ، يمكننا بسهولة تحويل هذا إلى مزيج قابل لإعادة الاستخدام متى أردنا استخدام ملف transform: scale() قاعدة:

mixin transform-scale ($ x) {
    -webkit-transform: scale ($ x) ؛
        -ms- تحويل: مقياس ($ x) ؛
            تحويل: مقياس (x $) ؛
}

 

باستخدام المزيج أعلاه ، نحدد المقدار الذي نريد قياس كل منهما transform مع الالجائزة $x جدال. يمكن بعد ذلك استخدام هذا المزيج في أي كتلة تعليمات برمجية لـ Sass ، باستخدام ملف @include بيان مسبق:

p {
    تضمين مقياس التحويل (2) ؛
}

 

للحلقات

على غرار لغات البرمجة مثل JavaScript أو PHP أو Python ، يتيح لك Sass إنشاء ملف for loop ، للتكرار على مدى عدد محدد من المرات. المعرفة باستخدام @for الكلمة الرئيسية ، يمكن الإشارة إلى طول Sass for loops بطريقتين مختلفتين: “x عبر y” أو “x إلى y” ، حيث x هي نقطة البداية و y هي نقطة النهاية. عند تحديد الحلقة بـ through، سوف الحلقة تتضمن القيمة النهائية (على سبيل المثال ، 1 through 10 ستشمل 10 في الحلقة) ، أثناء استخدام to سترتفع الحلقة إلى أعلى دون تضمين القيمة النهائية (على سبيل المثال 1 to 10 سيذهب فقط من 1 إلى 9). كمثال على استخدام 1 through 10:

for $ i من 1 إلى 10 {
    .col - # {$ i} {width: 100٪ / 10 * $ i؛ }
}

 

• @for حلقة أعلاه ستطبق أ width الحساب إلى 10 فئات CSS مختلفة (تبدأ كل منها بـ .col- متبوعًا برقم بين 1 و 10). ستحدد الحلقة عرضًا لكل فئة CSS ، محددة بنسبة 100٪ / 10 مضروبًا في رقم الفئات (من 1 إلى 10). سيؤدي هذا إلى مجموعات القواعد التالية لكل فئة من الفئات:

.col-1 {
    عرض: 10٪،   
}
.col-2 {
    عرض: 20٪،
}
.col-3 {
    عرض: 30٪،
}
.col-4 {
    عرض: 40٪،
}
â € <
 
â € <
.col-10 {
    عرض: 100٪،
}

 

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

جزئيات

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

لاستيراد هذه الأجزاء إلى ملفك الرئيسي ، يمكنك ببساطة استخدام امتداد @import بيان أعلى الملف:

// main.scss
â € <
import "الشبكة"
@ استيراد 'mixins'

 

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

 كيفية استخدام node-sass لتجميع ملفات Sass في برنامج نصي npm

في حين أن هناك العديد من الخيارات لاختيار كيفية ترجمة معالج Sass الشهير إلى CSS عادي ، أصبح المترجم الذي يستخدم محرك LibSass أكثر شيوعًا بشكل متزايد. تمت كتابته في البداية بلغة Ruby ، ​​باستخدام جوهرة Ruby الأصلية أو برنامج قائم على Ruby مثل Compass لتجميع Sass ، وسرعان ما أصبح مضيفًا لمجموعة متنوعة من الانتقادات فيما يتعلق بوقت التجميع البطيء و السرعة الإجمالية. ردًا على شكاوى الأداء ، تم نقل محرك Sass الأصلي إلى C / C ++ مثل LibSass ، مع توفر العديد من الأغلفة لتشغيل محرك Sass في كل لغة برمجة شائعة تقريبًا. سيقدم هذا البرنامج التعليمي لغة برمجة Sass وسيوفر أيضًا دليلًا تفصيليًا لاستخدام غلاف node-sass لتجميع كود Sass الخاص بك ، مباشرةً كنص npm. لاحظ أن node-sass مخصص للاستخدام مع .scss بدلاً من ملفات .sass، الخيار الأول هو الخيار الأكثر شيوعًا وشعبية.

حول المعالج الأولي لـ Sass CSS

ساس، أو أوراق الأنماط الرائعة نحويًا ، هي مثال لمعالج CSS المسبق ، والذي يتيح مطوري الويب سريع الاستجابة لإنشاء رمز بلغة واحدة ثم “ترجمته” إلى CSS. تمتاز Sass ، المرخصة بموجب MIT ، بتوافقها مع CSS ولغة البرمجة الغنية بالميزات ، مما يجعلها مزيجًا مثاليًا من خصائص ورقة الأنماط وبرنامج الكمبيوتر. بهذا المعنى ، فهي أداة قوية لمطوري مواقع الويب الذين لديهم دراية بالبرمجة ، على الرغم من أنه يمكن لأي شخص تعلم كيفية تشغيل Sass بممارسة كافية. أيضًا ، هناك نوعان مختلفان من لغة Sass ، Sassy CSS (اختصار باسم SCSS) وببساطة Sass. في حين أن Sassy CSS تشبه إلى حد كبير CSS من حيث بناء الجملة ، فإن Sass هو أفضل تفضيل لـ مطوري التطبيقات الذين يهتمون أكثر بالراحة. يتجاهل الخيار الأخير الأقواس المتعرجة والفاصلة المنقوطة ويقرأ بدلاً من ذلك التعليمات البرمجية بناءً على المسافات البادئة.

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

إعداد ساس

قم بتثبيت Node.js و NPM

إذا لم يكن Node.js مثبتًا لديك بالفعل ، فيمكنك تنزيل أحدث إصدار عليه موقع رسمي. إذا لم تكن معتادًا على هذا المصطلح ، فإن Node.js هي بيئة تشغيل شائعة لجافا سكريبت. تأتي Node معبأة مسبقًا مع npm ، مدير حزمة Node الرسمي الذي يمنح المطورين إمكانية الوصول إلى كود Javascript مفتوح المصدر ، لذلك سيتم تثبيته في نفس الوقت. (إذا كنت مهتمًا أو تحتاج إلى تثبيت npm بشكل منفصل ، فيمكنك القيام بذلك في الموقع الرسمي لـ npm.) للتحقق من تثبيت npm بنجاح ، قم بتشغيل npm -v في جهازك لتأكيد إصدار npm الموجود حاليًا على جهاز الكمبيوتر الخاص بك. في الوقت الذي تم فيه تحديث منشور المدونة هذا ، تم إصدار أحدث إصدار من npm 6.7.0.

تثبيت node-sass

بمجرد تثبيت npm ، حان الوقت لتثبيت node-sass. يمكنك القيام بذلك عن طريق الجري npm install -g node-sass في جهازك الطرفي لتثبيت الحزمة عالميًا (أي متوفرة عبر نظامك بالكامل) ، أو تشغيلها npm install node-sass بدون ال -g علم للتثبيت فقط على دليلك الحالي.

إعداد المشروع مع package.json

على افتراض node-sass الآن مثبت عالميًا ، حان الوقت لإنشاء أو اختيار دليل مشروع حيث نريد مشاهدة ملفات Sass الخاصة بنا. انتقل إلى دليل المشروع الخاص بك ، وقم بتهيئة المشروع بامتداد package.json ملف ، عن طريق التشغيل npm init.

سيُطلب منك إدخال مجموعة متنوعة من التفاصيل حول المشروع ، مثل package name, version, description وتفاصيل أخرى. يمكنك إما ملء هذه المعلومات الآن أو النقر فقط Enter لكل من هذه المطالبات واملأها لاحقًا.

بعد التنقل عبر كل مطالبة ، ستكون هناك مطالبة لتأكيد المعلومات التي تم إدخالها (أو ترك المعلومات فارغة). اضغط على Enter مرة أخرى و package.json سيتم إنشاء الملف.

إضافة node-sass سيناريو

فتح package.json ملف في محرر النصوص الذي تختاره ، وأضف السطر التالي داخل ملف "scripts" موضوع:

"scss": "node-sass --watch assets/scss -o assets/css"

يخبرنا السطر أعلاه npm لتشغيل نص برمجي ، ومراقبة التغييرات على أي برنامج .scss الملفات في assets/scss الدليل وتنفيذ هذه التغييرات في ملفات CSS المقابلة في ملف assets/css الدليل. يجب عليك تغيير مسارات الأدلة الخاصة بك وفقًا لذلك.

تم تحريره package.json يجب أن يبدو الملف مثل هذا:

{
  "الاسم": "ساس إكس",
  "الإصدار": "1.0.0",
  "الوصف": "",
  "الأساسية": "index.js",
  "نصوص": {
    "اختبار": خطأ "صدى ": لم يتم تحديد اختبار  "&& خروج 1",
    "scss": "عقدة ساس" --راقب الأصول/SCSS -o الأصول/المغلق"
  },
  "المؤلف": "",
  "رخصة": "اذهب"
}

 

احفظ الملف ثم اغلقه. الآن في جذر دليل المشروع ، قم بتشغيل npm run scss لبدء مشاهدة أي تغييرات تطرأ على .scss الملفات.

طرق بديلة لتثبيت Sass

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

نظرة عامة على التصميم باستخدام Sass

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

المتغيرات

تمامًا كما هو الحال في البرمجة ، يمكنك إنشاء متغيرات وتنفيذها في Sass عبر ورقة الأنماط الخاصة بك. هذا ملائم للغاية لأنه إذا كان هناك نمط معين تريد استخدامه في جميع أنحاء موقع الويب الخاص بك (على سبيل المثال ، نوع حزمة الخط واللون وما إلى ذلك) ، يمكنك ببساطة تخزينه في متغير واستخدامه في جميع أنحاء ورقة الأنماط الخاصة بك. يعد إعلان متغير في Sass أمرًا مباشرًا بشكل خاص للمبرمجين لأنه مطابق من الناحية المفاهيمية لـ Javascript. على سبيل المثال ، إذا أعلنت $primary-color: #525; ($ variable: value؛) في بداية ورقة الأنماط الخاصة بك ، ثم يمكنك إدخالها ببساطة $primary-color لأي قيمة لون.

التعشيش

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

استيراد ملفات SASS

نظرًا لأن مواقع الويب ومستندات HTML الخاصة بك تصبح أكثر تعقيدًا ، فسيؤدي ذلك عادةً إلى نمو موازٍ لملفات CSS الخاصة بك. ومع ذلك ، فإن إنشاء المزيد من الأنماط سيؤدي في النهاية إلى تشويش أوراق الأنماط الخاصة بك ، مما يجعل من الصعب صيانتها وكتابتها بطريقة منظمة. لحسن الحظ ، باستخدام Sass ، يمكنك تقسيم أوراق الأنماط الخاصة بك إلى ملفات Sass متعددة. عندما تكون جاهزًا لبدء تشغيل موقع الويب الخاص بك ، يمكنك دمج ملفات SCSS المتعددة في ورقة أنماط رئيسية واحدة ، ثم ربطها بمستند HTML الخاص بك من خلال ميزة الاستيراد. بخلاف CSS ، سيتطلب الأمر فقط طلب HTTP واحدًا لتحميل ورقة أنماط Sass “الرئيسية” الفردية ؛ في CSS ، يقوم العميل بإجراء طلب HTTP لكل ورقة أنماط يتم استيرادها. لاستيراد ورقة أنماط ، ما عليك سوى كتابة الكلمة الأساسية @import متبوعًا باسم ورقة الأنماط الفرعية بين علامتي اقتباس (@import “ورقة الأنماط” ؛). هذه ميزة رئيسية أخرى لـ Sass تبسط عملية إدارة موقع ويب.

باستخدام Mixins

معظم الأشخاص الذين لديهم خبرة في البرمجة على دراية بوظائف أو طرق الكتابة في برامجهم ؛ ومع ذلك ، لا تدعم ملفات CSS التقليدية هذه الميزة. لحسن الحظ ، يسمح Sass للمطورين بكتابة mixins ، أو مجموعة من إعلانات CSS التي يتم تجميعها معًا ويمكن استخدامها بشكل متكرر في أي مكان في ورقة الأنماط الخاصة بك. المزيج هو في الأساس مكافئ للدالة ؛ يمكنه قبول قيمة إدخال وتوصيلها بإعلانات CSS المجمعة داخل mixin. لإنشاء مزيج ، ببساطة اكتب @mixin mixinName(value) متبوعة بإعلانات CSS التي تستخدم القيمة المدخلة. للاتصال بهذا المزيج في ورقة الأنماط الخاصة بك ، اكتب الكلمة الأساسية @include متبوعًا باسم وقيمة mixin (إن أمكن). يمهد Mixins في Sass بلا شك الطريق لتصميم موقع قوي وفعال من خلال إنشاء كود أقل تكرارًا.

استخدام الوراثة والتوجيهات الأخرى

ميزة البرمجة القوية الأخرى التي يمكنك تنفيذها من خلال تطوير موقع الويب باستخدام Sass هي الميراث. يمكنك الإشارة إلى هذا على أنه “تمديد” المحددات في Sass. بإستخدام @extend، يمكن أن ترث المحددات خصائص CSS للمحددات الأخرى ، وبالتالي تبسط شفرتك بشكل كبير عن طريق إزالة الحاجة إلى التعليمات البرمجية المتكررة. يؤدي ذلك إلى مزيد من المرونة في ورقة الأنماط الخاصة بك عن طريق “تشغيل” محدد بالكلمة الرئيسية فقط @extend. لاستخدام هذه الميزة ، ما عليك سوى إنشاء محدد بامتداد % في المقدمة للإشارة إلى أنه يمكن تمديد خصائص CSS في هذا المحدد. الآن ، عندما تقوم بإنشاء محدد آخر ، يمكنك الاتصال @extend %selectorName; وخصائصه سيرثها المحدد الجديد.

وعلى الرغم من أن @extend تحظى الوظيفة بشعبية كبيرة بين دعاة Sass ، فهناك العديد من وظائف البرمجة الأساسية التي تم دمجها في لغة Sass. على سبيل المثال ، معظم المبرمجين على دراية باستخدام العبارات الشرطية. الآن ، يمكن لمطوري Sass استخدام ملفات @if من يدخل الي المتجر بغرض الشراء @else التوجيهات التي ستؤدي إلى تطوير موقع أكثر قوة. وبالمثل ، يمكن لمن هم على دراية بحلقات for and while التقليدية نسخ وظائف Java مع امتداد @for من يدخل الي المتجر بغرض الشراء @while توجيهات.

باستخدام عوامل التشغيل

يستخدم المبرمجون خوارزميات مدفوعة رياضيًا طوال الوقت. من ناحية أخرى ، لا يوجد عملياً أي استخدام للرياضيات في تصميم CSS التقليدي. لحسن الحظ ، يسمح Sass للمطورين باستخدام عوامل التشغيل الأساسية (+ ، – ، * ، / ،٪) لحساب قيم البكسل أو النسبة المئوية في إعلانات CSS. إنها أداة صغيرة ولكنها عملية للغاية للمصممين الذين يرغبون في إنشاء مواقع ويب أكثر تعقيدًا. وفقًا للوثائق الرسمية لـ Sass ، هناك أيضًا مكتبة للوظائف التي تعتمد على الرياضيات والتي يمكن لمطوري Sass استخدامها. في الواقع ، ربما يكون معظم المبرمجين على دراية بالعديد من هذه الوظائف في المكتبة. يتضمن وظائف مثل abs($number) للعثور على القيمة المطلقة ، min($numbers…) للعثور على أصغر القيم المتعددة ، و random() لإرجاع قيمة عددية عشوائية. لعرض جميع الوظائف المتاحة على Sass ، قم بزيارة موقع التوثيق الرسمي لساس.

التحويل بين ملفات SCSS إلى CSS

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

• sass or $ bundle exec sass: يستخدم لتحويل ملف Sass المصدر إلى ملف CSS. يركض sass --help لمزيد من التعليمات.
• sass-convert or $ bundle exec sass-convert: يستخدم للتحويل بين ملفات Sass و SCSS و CSS. يركض sass-convert --help لمزيد من التعليمات. هذا ملف تنفيذي مثالي للمشاريع الحالية التي ترغب في التبديل إليها إلى تنسيق SCSS.

معالجات CSS الأولية الأخرى

مرقم

تم تصميم Stylus على غرار Sass ، وهو بديل آخر شائع للغاية لمعالج CSS المسبق. من الميزات المفيدة بشكل خاص التي تجذب العديد من المستخدمين نحو Stylus هي لغتها وتركيبها الديناميكي والمرن للغاية. يتوفر للمستخدمين خيار حذف علامات الترقيم مثل الأقواس المتعرجة والنقطتين والفاصلة المنقوطة. يمكنهم حتى حذف كلمات رئيسية معينة (على سبيل المثال ، @mixin) إذا كانوا يفضلون. على غرار Sass ، يدمج Stylus العديد من ميزات البرمجة القوية مثل الوظائف / المزيجات والمتغيرات والتكرار والوراثة. ميزة مفيدة بشكل خاص في Stylus هي CSS الحرفية ، المشار إليها بواسطة @css. يمكن استخدام هذه الكلمة الأساسية للعودة إلى نوع CSS إذا كان Stylus غير قادر على تلبية الطلب.

أقل

Less ، الذي يرمز إلى Leaner Stylesheets ، هو خيار آخر لمعالج CSS مشابه جدًا لبدائلها. يقدم العديد من ميزات البرمجة المضمنة. يتضمن ذلك إنشاء متغيرات ، واستخدام mixins ، وتداخل الكود الخاص بك ، واستخدام مكتبة من الوظائف المضمنة. بخلاف Stylus ، يعتبر Less أكثر صرامة في تركيبه. في الواقع ، إنه يكرر عمليا بناء جملة كود CSS التقليدي. بناءً على تفضيلاتك الشخصية ، قد ترى هذا على أنه ميزة أو عيب.

 

SASS مقابل LESS

نحتاج إلى المرور ببعض الأساسيات لفهم ماهية SASS و LESS. لذلك دعونا نبدأ بمناقشة المعالج المسبق لـ CSS. عملية CSS التمهيدية هي لغة برمجة يستخدمها المبرمجون لتوسيع CSS عندما يكتبون تعليمات برمجية بلغة واحدة. ثم يقوم معالج CSS المسبق بتجميعها في CSS. SASS هو أشهر مثال على ذلك CSS المعالج المسبق بينما البعض الآخر مثل LESS و Stylus أقل شهرة.

ما هو SASS؟

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

SCSS

وبالمثل ، فإن SCSS هو نوع ملف خاص في Ruby يقوم بتجميع CSS Style Sheets لمتصفح. لذلك ، يمكنك القول أن SCSS يشبه CSS ولكن مع تنسيق أفضل للترميز.

ما هو أقل؟

يرمز LESS إلى Learner Style Sheets وهو امتداد لغة متوافق مع الإصدارات السابقة يستخدمه الأشخاص في CSS. من السهل إلى حد ما تعلم LESS لأنه يشبه CSS تمامًا. يمكنك استخدام LESS لتداخل القواعد داخل القواعد التي بسببها يتم تطبيق القواعد داخل محدد القاعدة الخارجي.

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

أقل أو SAAS: ما الذي يجب أن أستخدمه؟

من الصعب جدًا فهم ما إذا كان LESS أفضل من SAAS أو العكس ، ولكن يمكننا مقارنة ميزاتها للحصول على فكرة أوضح عن أي مستخدم يجب أن يختاره. دعونا نقوم بتحليل مقارن لـ SASS و LESS للحصول على فكرة أفضل عن أيهما أفضل؟

يستخدم كل من SASS و LESS وظائف وخلطات متشابهة. ومع ذلك ، تستخدم SASS لغة Ruby كلغة أساسية. من ناحية أخرى ، يستخدم LESS جافا سكريبت للترميز. لا يزال الاختلاف في لغة الترميز لا يعطي ميزة لأي من هذه اللغات.

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

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

أيهما أفضل SASS أم SCSS أم LESS؟

دعونا نلقي نظرة على الخصائص الفردية لـ SASS و SCSS و LESS ، لمعرفة أي من امتدادات CSS هذه أفضل للمطورين.

SASS

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

أقل

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

SCSS

• SCSS هو نوع خاص من fie لـ SASS يسمح بوظائف إضافية في CSS.
• لا يتطلب SCSS رمزًا لغويًا
• لا يحتاج SCSS إلى اتباع المسافات البادئة الصارمة ، على عكس SASSS
• يشبه SCSS SASS في أنماط الكتابة ولكن استخدام الأقواس والفواصل المنقوطة ضروري
• لها امتداد الملف
• لدى SCSS مجتمع مطور أصغر مقارنة بـ SASS ، وهذا هو السبب في أن الدعم مع SCSS أقل أيضًا.

هل يستخدم Bootstrap SASS أم أقل؟

يعد Bootstrap خيارًا شائعًا لمجتمع التطوير على مستوى العالم ، وبما أن LESS كان له تأثير كبير على السوق خلال Boostrap 3 ، فقد قدم بديلاً SASS. ومع ذلك ، تتغير الأشياء تمامًا عندما تفكر في Boostrap 4. ذلك لأن Boostrap 4 يستخدم SASS بالكامل. هذه هي المرة الأولى التي يستخدم فيها كود مصدر Boostrap SAAS.

لذلك ، من الآمن القول أن SASS هي اعتبار أكثر أمانًا للمستقبل. يعتقد الخبراء أن Boostrap قام بهذه الخطوة الجريئة لأن عدد مستخدمي SASS تضاعف تقريبًا مقارنةً بمستخدمي أقل.

لماذا يستخدم المزيد من المطورين LESS و SASS بدلاً من CSS؟

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

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

ومع ذلك ، من الواضح أن كلاً من SASS و LESS يلعبان أدوارًا حيوية في عالم التنمية. لا تزال SASS تحظى بشعبية على الرغم من قدومها إلى الصناعة في وقت أبكر من LESS. كل من هذه الإضافات لها مزاياها وعيوبها وكل هذا يتوقف على كيفية استخدام المستخدمين لها.

في الختام

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

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

آمل أن ترشدك هذه المقالة أثناء تجربة التقنيات المتطورة الموضحة أعلاه.