100 lines
8.5 KiB
Markdown
100 lines
8.5 KiB
Markdown
|
---
|
|||
|
|
title: Getting Started with Sass
|
|||
|
|
localeTitle: الابتداء مع ساس
|
|||
|
|
---
|
|||
|
|
### المقدمة
|
|||
|
|
|
|||
|
|
Sass يرمز إلى "أوراق الأنماط المركّبة syntactically" وهو معالج CSS المسبق. يقوم المعالج المسبق بترجمة التعليمات البرمجية المكتوبة بلغة معينة إلى كود "المنتج" الذي يمكن قراءته آليًا (يمكن قراءة المستعرض). في الأساس ، يجمع Sass التعليمات البرمجية إلى CSS العادي الذي يمكن للمتصفحات لدينا تفسيره! _لماذا كتابة التعليمات البرمجية في Sass عند CSS موجود بالفعل؟_ الإجابة المختصرة هي أن Sass يأتي بميزات أكثر قوة مضمنة في تركيبته التي تسمح للمطورين بكتابة رمز واجهة المستخدم DRY-er ، وقابلية التطوير ، وأكثر قابلية للصيانة.
|
|||
|
|
|
|||
|
|
إذا كنت على دراية بـ CSS ، فإن تعلم ساس سوف يكون أسهل لك قليلاً. إذا لم يكن الأمر كذلك ، فقد يكون من المثالي البدء في تعلم بعض أساسيات CSS في قسم HTML5 & CSS في Free Code Camp في دورة شهادة تطوير الواجهة الأمامية ، بالإضافة إلى إلقاء نظرة على [مقالة CSS الخاصة بـ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) .
|
|||
|
|
|
|||
|
|
في الجزء الأول من هذه المقالة ، سأشرح كيفية تثبيت برنامج 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` . _سيتم إعطاء تفسيرات موجزة حول الاختلافات بين النمطين في وقت لاحق. للحصول على شرح تفصيلي ، راجع_ [مقالة](http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better) _John W. Long's_ [Sass مقابل SCSS](http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better) .
|
|||
|
|
|
|||
|
|
_من أجل التناسق ، ستقدم هذه المقالة أمثلة التعليمات البرمجية بتنسيق `.scss` ، ومع ذلك فإن كلا `.scss` بنفس القدر من الشعبية._
|
|||
|
|
|
|||
|
|
حسنا ، دعونا نبدأ. سنقوم بإنشاء مجلد جديد لإدراج ملفات المثال الخاصة بنا (يمكنك القيام بذلك في أي مكان على الكمبيوتر الخاص بك ، ويمكنك استخدام سطر الأوامر أو القيام بذلك يدويًا).
|
|||
|
|
|
|||
|
|
في المجلد ، `style.scss` ملفًا باسم `style.scss` وملف HTML إلى النمط المسمى `index.html` :
|
|||
|
|
|
|||
|
|
_أمر `tree` في الصورة أعلاه هو من حزمة npm التي يمكنك تثبيتها وليست محلية في سطر الأوامر. قيادة `ls` يفعل أساسا نفس الشيء._
|
|||
|
|
|
|||
|
|
الآن بعد أن أصبح لدينا إعداد مجلد مشروعنا ، يمكننا استخدام الأمر Sass watch "لمراقبة" ملف Sass الخاص بنا وتجميع التعليمات البرمجية الخاصة بنا عندما تقوم بالكشف عن تغيير في الملف. نكتب أمر الساعة في الملف الذي نريد مشاهدته:
|
|||
|
|
|
|||
|
|
`sass --watch style.scss`
|
|||
|
|
|
|||
|
|
الخطوة التالية هي فتح مجلد المشروع في محرر النص الذي تختاره. بمجرد فتح ملفاتنا وجاهزة للتحرير ، يمكننا إضافة صفحة HTML أساسية جدًا (بالنسبة لنا إلى النمط) والتي ستظهر كما يلي:
|
|||
|
|
|
|||
|
|
`<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Sass!</title>
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<article>
|
|||
|
|
<h1>Hello World</h1>
|
|||
|
|
<p class="cat-paragraph-1">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.</p>
|
|||
|
|
<p class="cat-paragraph-2">Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.</p>
|
|||
|
|
</article>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
بعد إعداد 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 أو ربما ترغب في [العبث](http://www.sassmeister.com/) برمز عينة أكثر ، فإن [Sassmeister](http://www.sassmeister.com/) عبارة عن واجهة رائعة عبر الإنترنت تتيح لك الكتابة في بناء جملة Sass وترى على الفور الشفرة التي تم تجميعها في CSS بدون الاضطرار إلى تثبيت أي شيء أو القيام بأي إعداد على جهاز الكمبيوتر الخاص بك. إنه مورد مفيد جدًا لوضع الحماية واختبار كود Sass الخاص بك.
|