عالم البرمجة عالم البرمجة

SCSS

Jassim mohammed • منذ 5 سنوات

ماهو الscss وهل هو افضل من الcss وهل هناك مواقع تعليميه له ؟

كلمات دليلية: css html js sass scss
أعجبني السؤال تابع السؤال شارك السؤال

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (2)

Ali Majrashi • منذ 5 سنوات
مميز

بالنسبة لـ scss هذا احد اختصارات ملفات Sass لان Sass يدعم كتابة ملفات css بنوعين scss. اختصار لـ Sassy CSS هذي الصيغة الجديدة لجميع ملفات sass والصيغة القديمة هي .sass الفرق بينهم فقط بالصيغة بالكتابة حيث ان ملفات .scss شبيهة جدا بملفات css العادية وفيها الاقواس والفاصلة المنقوطة بينما ملفات .sass لايوجد بها الفواصل المنقوطه والاقواس بينما يتم استخدام المسافات لتحديد انتهاء الكود 

مثال بسيط لكود .scss 

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

نفس المثال ولكن صيغة الملف .sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

لاحظ بين المثالين استخدمنا بالكود الاول اقواس وفاصلة منقوطة بينما المثال الثاني بدون الاقواس والفاصلة المنقوطة بنهاية اي كود والاجمل لاحظ وجود متغيرات في كود css وهنا تجي اهمية sass وغيرها من تقنيات CSS preprocessors بحيث وجدت هالادوات لتسهيل عمل المبرمج لكتابة ملفات css بطريقة المبرمجين وعدم تكرار الاكواد بحيث تسمح لك باستخدام امور تعلمتها بالبرمجة مثل 

  1. variables
  2. nesting
  3. mixins
  4. inheritance
  5. If/Else Statements
  6. Math
  7. Loops
  8. Imports

هالمصطلحات ليست موجودة عند كتابة ملفات css عادية ولكن مع توفر هالتقنيات التي يطلق عليها CSS preprocessors اصبح بامكانك كتابة ملفات css اكثر دينامكية ومرنة بحيث وفرت الكثير من الادوات لتبسيط حياتك كمبرمج عند العمل مع ملفات css اشهر اطر العمل مثل Bootstrap و Foundation وغيرها تستخدم هذه الادوات لبناء ملفاتها مما يسهل عمل المطورين بالتطوير وحل المشاكل واضافة مميزات مع ضخامة ملفات css لان راح تكتب ملف css بطريقة المبرمجين وكانك تكتب بلغة جافاسكربت او بايثون او بي اتش بي ثم بعد انتهائك تقوم بتصدير الملفات الى ملف css عادي يدعم المتصفحات التي تقوم بتحديد دعمها 

نجي للصورة الاكبر غير sass يوجد العديد من الادوات التي ممكن تستخدمها لكتابة ملفات css وكما قلنا سابقا يطلق عليهم CSS preprocessors هنا بعض الادوات 

وغيرهم كثير تقدر تختار المناسب لك ولمشروعك وتمشي عليه هنا مقال يقارن لك مميزات هالادوات بشكل مبسط ولكل اداة 

https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus

بالنسبة لمصادر التعلم كثير اهمها موقع الاداة حيث كل الي عليك تتعلم طريقة التثبيت والصيغه وطريقة تصدير ملفات css ويوجد باليويتوب العديد من الفيديوهات الي تشرحها بالتفصيل 

عبدالله زاهر • منذ 5 سنوات

كتابة الاكواد في CSS كتابة توصيفية كاملة مثل:

body{
 width: 800px
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

لكن SCSS تستطيع اختصار الكثير من الاكود بإستخدام @mixin ، فما نحتاج نكتب اللون والعرض في كل مرة وفي كل كود. نقدر نعرفها كمتغير في اول الملف كأي لغة برمجة ونختصر الكثير. وهذا مثال لها:

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

 

هنا بعض المراجع لتعلم اللغة:

https://www.codecademy.com/learn/learn-sass

https://sass-lang.com/guide

https://www.tutorialspoint.com/sass/index.htm

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن