8.5 KiB
| title | localeTitle |
|---|---|
| Getting Started with Sass | الابتداء مع ساس |
المقدمة
Sass يرمز إلى "أوراق الأنماط المركّبة syntactically" وهو معالج CSS المسبق. يقوم المعالج المسبق بترجمة التعليمات البرمجية المكتوبة بلغة معينة إلى كود "المنتج" الذي يمكن قراءته آليًا (يمكن قراءة المستعرض). في الأساس ، يجمع Sass التعليمات البرمجية إلى CSS العادي الذي يمكن للمتصفحات لدينا تفسيره! لماذا كتابة التعليمات البرمجية في Sass عند CSS موجود بالفعل؟ الإجابة المختصرة هي أن Sass يأتي بميزات أكثر قوة مضمنة في تركيبته التي تسمح للمطورين بكتابة رمز واجهة المستخدم DRY-er ، وقابلية التطوير ، وأكثر قابلية للصيانة.
إذا كنت على دراية بـ CSS ، فإن تعلم ساس سوف يكون أسهل لك قليلاً. إذا لم يكن الأمر كذلك ، فقد يكون من المثالي البدء في تعلم بعض أساسيات CSS في قسم HTML5 & CSS في Free Code Camp في دورة شهادة تطوير الواجهة الأمامية ، بالإضافة إلى إلقاء نظرة على مقالة CSS الخاصة بـ MDN .
في الجزء الأول من هذه المقالة ، سأشرح كيفية تثبيت برنامج Sass على جهاز الكمبيوتر الخاص بك وكيفية تجميع شفرة Sass-written في CSS.
التركيب
إن أبسط طريقة لتثبيت Sass على جهازك هي من خلال سطر الأوامر. Sass جوهرة روبي وسوف يتطلب الأمر التالي:
بالنسبة لأجهزة Mac وأجهزة الكمبيوتر:
sudo gem install sass
بالنسبة لنظام التشغيل Linux ، ستحتاج إلى تثبيت لغة Ruby أولاً ، ثم:
sudo su -c "gem install sass"
يجب أن تكون الآن قادرًا على التحقق من إصدار Sass المركب:
sass -v
ويجب أن يعرض شيئًا مشابهًا لما يلي:
Sass 3.4.21 (Selective Steve)
إذا كان الأمر كذلك ، مبروك ، لقد قمت بتثبيت ساس فقط! الآن على استخدام ساس.
الاستخدام الأساسي & التركيب
لنبدأ بمثال بسيط للغاية لتوضيح كيف يعمل Sass بالفعل. يمكنك متابعة الخطوات أو ببساطة القراءة.
استيراد sidenote: يمكن كتابة Sass في نمطين مختلفين قليلاً ، لكل منهما فوائده الخاصة. سيستخدم نمط واحد امتداد الملف .sass والآخر سيستخدم .scss . سيتم إعطاء تفسيرات موجزة حول الاختلافات بين النمطين في وقت لاحق. للحصول على شرح تفصيلي ، راجع مقالة John W. Long's Sass مقابل SCSS .
من أجل التناسق ، ستقدم هذه المقالة أمثلة التعليمات البرمجية بتنسيق .scss ، ومع ذلك فإن كلا .scss بنفس القدر من الشعبية.
حسنا ، دعونا نبدأ. سنقوم بإنشاء مجلد جديد لإدراج ملفات المثال الخاصة بنا (يمكنك القيام بذلك في أي مكان على الكمبيوتر الخاص بك ، ويمكنك استخدام سطر الأوامر أو القيام بذلك يدويًا).
في المجلد ، style.scss ملفًا باسم style.scss وملف HTML إلى النمط المسمى index.html :
أمر tree في الصورة أعلاه هو من حزمة npm التي يمكنك تثبيتها وليست محلية في سطر الأوامر. قيادة ls يفعل أساسا نفس الشيء.
الآن بعد أن أصبح لدينا إعداد مجلد مشروعنا ، يمكننا استخدام الأمر Sass watch "لمراقبة" ملف Sass الخاص بنا وتجميع التعليمات البرمجية الخاصة بنا عندما تقوم بالكشف عن تغيير في الملف. نكتب أمر الساعة في الملف الذي نريد مشاهدته:
sass --watch style.scss
الخطوة التالية هي فتح مجلد المشروع في محرر النص الذي تختاره. بمجرد فتح ملفاتنا وجاهزة للتحرير ، يمكننا إضافة صفحة HTML أساسية جدًا (بالنسبة لنا إلى النمط) والتي ستظهر كما يلي:
`
<html lang="en"> <head> </head>Hello World
Cat ipsum dolor sit amet, stand in front of the computer screen, so chase imaginary bugs has closed eyes but still sees you caticus cuteicus.
Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.
بعد إعداد HTML ، يمكننا فتح ملف style.scss بنا والبدء في التصميم في Sass. في نموذج التعليمة البرمجية أدناه ، ربما تلاحظ كيف أن بعض محددات النمط متداخلة داخل محدد المقالة ؛ شيء فريد من نوعه لساس. لا تقلق ، سيتم شرح البنية في الجزء 2. في الوقت الحالي ، نريد فقط أن نفهم كيف يعمل ساس في أبسط صوره.
article { h2 { font-family: Arial; color: blue; } .cat-paragraph-1 { color: red; } .cat-paragraph-2 { color: green; } }
وبمجرد كتابة هذا الرمز وحفظه في ملف style.scss ، فإن مهمة المراقبة التي style.scss في سطر الأوامر style.scss الملف ، style.scss بتجميع Sass إلى CSS ، وإخراج ملف جديد بعنوان style.css . قد ترى أيضًا ملفًا باسم style.css.map في مجلد مشروعك الذي ظهر بطريقة سحرية أيضًا. هذا الملف يسمى sourcemap وهو ذو فائدة كبيرة عند تصحيح Sass ، ولكن الآن سنتركه.
فيما يلي يمكننا رؤية الملفات المدرجة في مجلد المشروع.
والآن إذا index.html في متصفح ويب ، يمكننا أن نرى صفحة HTML الخاصة بنا مصممة باستخدام CSS التي تم تجميعها من نموذج Sass code. وبالمثل ، يمكننا فتح ملف style.css لمعرفة كيفية إخراج Sass لرمز Sass الأصلي. مدمجة ، أليس كذلك؟
أين أذهب من هنا؟
عظيم! الآن أنا أعرف كيفية تجميع ساس على جهاز الكمبيوتر الخاص بي. هل هاذا هو؟
ليس عن طريق تسديدة طويلة. كان هذا مثالا عظيما عن كيفية عمل ساس ، وبالتالي فإن فوائد الكتابة في ساس على الفانيلا المغلق قد لا تكون واضحة. كتبنا 12 سطراً من "ساس" وحصلنا على 7 أسطر من CSS نتيجة لذلك. ليس بالضبط فرق كبير بأي معايير. في الجزء 2 سنشرح السحر وراء بنية ساس مثل المتغيرات والميولنز ، وكيف يمكن استخدام هذه الأدوات لإعطائنا قوى خارقة عند التصميم.
إذا كنت لا تزال عالقة على كيفية تجميع ساس سحريًا في CSS أو ربما ترغب في العبث برمز عينة أكثر ، فإن Sassmeister عبارة عن واجهة رائعة عبر الإنترنت تتيح لك الكتابة في بناء جملة Sass وترى على الفور الشفرة التي تم تجميعها في CSS بدون الاضطرار إلى تثبيت أي شيء أو القيام بأي إعداد على جهاز الكمبيوتر الخاص بك. إنه مورد مفيد جدًا لوضع الحماية واختبار كود Sass الخاص بك.