السلام عليكم اخواني لقد بدأت بوضع مقال جديد يهدف الى التعرف على الSass لنستكشفها معا هيا لنبدأ على بركة الله 
ملاحظة فقط قبل البدأ هذا المقال مترجم لذا ستكون بعض الكلمات غير مفهومة أعتذر على ذلك
وستجدون رابط المصدر في الأسفل
ما هي Sass؟ هذا هو السؤال الذي نحن هنا للإجابة عليه. إذا كنت جديدًا في تصميم المواقع الإلكترونية ، فربما تكون قد سمعت المصطلح الذي يدور حولك ، لكنك قد لا تكون متيقنًا تمامًا من حيث ماهية ساس بالضبط ، وما الذي يفعله ، وما إذا كان يجب عليك استخدامه أم لا. باختصار ، Sass هو المعالج الأولي لـ CSS ، والذي يضيف ميزات خاصة مثل المتغيرات والقواعد المتداخلة والخلطات (يشار إليها أحيانًا بالسكر النحوي) في CSS العادي. الهدف هو جعل عملية الترميز أكثر بساطة وفعالية. دعنا نستكشف بمزيد من التفاصيل.
1-ما هو معالج CSS المسبق؟
المعالج المسبق لـ CSS هو لغة برمجة تعمل على توسيع CSS من خلال السماح للمطورين بكتابة التعليمات البرمجية بلغة واحدة ثم تجميعها في CSS. ربما يكون Sass هو المعالج الأول الأكثر شعبية في الوقت الحالي ، ولكن هناك أمثلة أخرى معروفة تتضمن Less و Stylus.
قبل أن نذهب إلى أبعد من ذلك ، يتم الإعلان السريع عن الخدمة العامة: سيقول معظم مصممي الويب أنك إذا كنت جديدًا على CSS ، فمن الأفضل أن تتجنب Sass (أو أي معالجات مسبقة أو ملحقات أو أطر عمل) بينما لا تزال تعلم. على الرغم من أنها توفر مزايا عديدة في السرعة والكفاءة ، إلا أنه من المهم أن تتعرف فعليًا على أساسيات CSS. تأكد من معرفة المفاهيم الأساسية قبل البدء في استكشاف الاختصارات والأشياء المربكة.
2- ما هي Sass؟
يعتبر Sass هو الأكثر فائدة لجميع امتدادات CSS
تعد Sass (اختصار ل “Syntactically awesome style sheets” والتي تعني “أوراق أنماط رهيبة من الناحية النحوية”) امتدادًا لـ CSS والتي تمكنك من استخدام أشياء مثل المتغيرات والقواعد المتداخلة والواردات المضمنة والمزيد. كما أنه يساعد على الحفاظ على تنظيم الأشياء ويسمح لك بإنشاء أوراق أنماط بشكل أسرع.
وSass متوافق مع جميع إصدارات CSS. الشرط الوحيد لاستخدامه هو أنه يجب أن يكون لديك روبي مثبتة. يُطلب من المستخدمين أيضًا اتباع إرشادات مجتمع Sass.
3-كيفية استخدام ساس
في القسم التالي ، سنوضح بعض النصائح الأساسية لاستخدام Sass ، باستخدام أمثلة من موقع Sass الرسمي. ألق نظرة علىوثائق Sass للحصول على مراجع وأمثلة إضافية.
- بناء الجملة(Syntax)
يتضمن Sass خيارين في بناء الجملة:
-
يستخدم :SCSS (Sassy CSS) في ملحق الملف .scss وهو متوافق تمامًا مع بناء جملة CSS.
-
بادئة (تسمى ببساطة “Sass”): تستخدم امتداد الملف .sass والمسافة البادئة بدلاً من الأقواس ؛ لا يتوافق تمامًا مع بناء جملة CSS ، لكنه أسرع في الكتابة
لاحظ أنه يمكن تحويل الملفات من بناء جملة واحد إلى الآخر باستخدام الأمر sass-convert
- المتغيرات(Variables)
تمامًا مثل لغات البرمجة الأخرى ، يتيح Sass استخدام المتغيرات التي يمكنها تخزين المعلومات التي يمكنك استخدامها في ورقة الأنماط الخاصة بك. على سبيل المثال ، يمكنك تخزين قيمة اللون في متغير في الجزء العلوي من الملف ، ثم استخدام هذا المتغير عند تعيين لون العناصر الخاصة بك. يمكّنك هذا من تغيير الألوان بسرعة دون الحاجة إلى تعديل كل سطر على حدة.
فمثلا:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
سيتم إنتاج CSS التالي:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
- التعشيش(Nesting)
التعشيش هو سيف ذو حدين. على الرغم من أنه يوفر طريقة ممتازة لتقليل مقدار التعليمات البرمجية التي تحتاج إلى كتابتها ، إلا أنه يمكن أن يؤدي أيضًا إلى CSS مؤهل بشكل زائد إذا لم يتم تنفيذه بعناية. الفكرة هي تداخل محددات CSS بطريقة تحاكي التسلسل الهرمي لـ HTML.
يعرض التالي نمط التنقل الأساسي الذي يستخدم التداخل:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
إخراج CSS كالتالي:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
- جزئيات(Partials)
الجزئية هي ملفات Sass أصغر يمكن استيرادها (انظر القسم التالي) إلى ملفات Sass الأخرى. فكر في الأجزاء الجزئية باعتبارها مقتطفات برمجية. باستخدام مقتطفات الكود هذه ، يمكن أن يكون CSS لديك الآن وحدات وأسهل في الصيانة. يتم تعيين جزئية على هذا النحو عن طريق تسميته بشرطة سفلية بادئة: _partial.scss.
- استيراد(Import)
عند استخدامه مع Partials (راجع القسم السابق) ، يسمح لك التوجيه import باستيراد ملفاتك الجزئية إلى الملف الحالي ، لإنشاء ملف CSS واحد. ضع في اعتبارك عدد الواردات التي تستخدمها كطلب HTTP سيتم إنشاؤه لكل واحدة.
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
و
// basefile.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
و CSS الناتج المقابلة:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
ملاحظة: عند استيراد الأجزاء ، لا تحتاج إلى تضمين امتداد الملف أو الشرطة السفلية.
- الـMixins
تتمثل إحدى مزايا استخدام المعالجين الأوليين في قدرتهم على أخذ تعليمات برمجية معقدة طويلة الأمد وتبسيطها. هذا هو المكان الذي يأتي في مزيج مفيد!
على سبيل المثال ، إذا كنت بحاجة إلى تضمين بادئات البائع ، فيمكنك استخدام mixin بدلاً من ذلك. ألقِ نظرة على هذا المثال عن دائرة نصف قطرها الحدود:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
لاحظ التوجيه الميكسين في الأعلى. لقد تم إعطاؤه اسم نصف قطر الحدود ويستخدم نصف القطر المتغير كمعلمة. يستخدم هذا المتغير لضبط قيمة نصف القطر لكل عنصر.
في وقت لاحق ، يتم استدعاء توجيه تضمين @ ، جنبا إلى جنب مع اسم مزيج (نصف قطر الحدود) ومعلمة (10px). وبالتالي
.box {include border-radius (10px)؛ }
يتم إنتاج CSS التالي:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
- تمديد / الميراث(Extend/Inheritance)
تم استدعاء توجيه extend كواحد من أقوى ميزات Sass. بعد رؤيته في العمل ، من الواضح لماذا.
تكمن الفكرة في أنه مع هذا التوجيه لن تضطر إلى تضمين أسماء فئات متعددة على عناصر HTML الخاصة بك ، ويمكنك الاحتفاظ برمزك DRY (لا تكرر نفسك). يمكن أن ترث المحددات الخاصة بك أنماط المحددات الأخرى ، ثم يمكن تمديدها بسهولة عند الحاجة. الآن هذا قوي.
- العاملين(Operators)
تتيح لك القدرة على إجراء العمليات الحسابية في CSS الخاص بك القيام بالمزيد ، مثل تحويل قيم البكسل إلى نسب مئوية. سيكون لديك الوصول إلى وظائف الرياضيات القياسية مثل الجمع والطرح والضرب والقسمة. بالطبع ، يمكن الجمع بين هذه الوظائف لإنشاء حسابات معقدة.
بالإضافة إلى ذلك ، يتضمن Sass بعض الوظائف المدمجة للمساعدة في معالجة الأرقام. وظائف مثل percentage(), floor() ,round() على سبيل المثال لا الحصر.
وأخيرا شكرا لكم على حسن القراءة والمتابعة
المصدر: من هنا
ربي يوفقك