Sass/guide

لغة CSS لغة ممتعةٌ، ولكنّ ملفات الأنماط أصبحت أكبر وأكثر تعقيدًا، وصيانتها صعبة ومتعبة؛ يمكن حينذاك أن تساعدنا المعالجة الأوليَّة (preprocessor). تتيح لك Sass استخدام ميزات غير موجودة في CSS مثل المتغيرات، والتشعب، والمخاليط، والوراثة، وغيرها من الأشياء التي تجعل البرمجة بلغة CSS ممتعةً مرةً أخرى.

تحفظ Sass الملفات المعالجة على هيئة ملف CSS عادي، والذي يمكنك استخدامه في موقعك.

الطريقة المباشرة لفعل ذلك هي باستخدام سطر الأوامر (terminal). يمكنك بمجرد تثبيت Sass تصريف الملفات إلى CSS باستخدام الأمر sass. ستحتاج إلى إخبار Sass بالملف الذي تريد تصريفه، وكذلك أين سيُخرج ملف CSS الناتج. مثلًا، تنفيذ الأمر sass input.scss output.css في سطر الأوامر سيصرف الملف input.scss إلى الملف output.css.

المتغيرات

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

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

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

عندما يُعالَج ملف Sass، يبدَّل المتغير ‎$font-stack والمتغير ‎$primary-color، اللذين عرّفناهما بقيمهما، ثمَّ يُخرج ملف CSS عادي بعدئذ. يمكن أن يكون هذا مفيدًا جدًّا عند استخدام ألوان خاصَّة بهوية الشركة البصرية لجعل الموقع متناسقًا.

body {
   font: 100%    Helvetica, sans-serif;
   color: #333; }

التشعّب (nesting)

لا شكّ أنّك لاحظت أنَّ ملفات HTML مبنية على تسلسل متشعّب. من جهة أخرى، لغة CSS ليست كذلك.

تسمح لك Sass بأن تُنظّم مُحدّدات CSS بنفس الطريقة التشعبيّة التي تجدها في ملفات HTML. انتبه إلى أنّ المبالغة في تشعيب القواعد سيؤدي إلى إنتاج قواعد CSS ذات محدِّدات قويَّة جدًا (over-qualified)، وهو أمرٌ يُعدّ من الممارسات السيئة عمومًا ولا ينصح به.

مع أخذ ذلك بالحسبان، إليك مثالًا لبعض الأنماط المعتادة لقائمة تنقل في مواقع الويب:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

لاحظ أنّ المحدّدات ul و li و a مُتشعّبة داخل المحدد nav. هذه طريقة جيدة لتنظيم ملف CSS خاصتك وتحسين مقروئيته. عند إنشاء ملف 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 جزئية تحتوي على مقتطفات صغيرة من CSS والتي يمكنك تضمينها في ملفات Sass أخرى. هذه الطريقة جيدةٌ لتنظيم ملفات CSS خاصتك كما تساعد على جعلها أسهل للصيانة. المجزوء هو ببساطة ملف Sass يُسبق اسمه بشرطة سفلية بادئة (underscore) مثل ‎_partial.scss. تُعلِم الشرطةُ السفلية لغةَ Sass أنّ الملف هو ملف جزئي، وأنّه لا ينبغي أن يُصرّف إلى ملف CSS. تُستخدم مجزوءات Sass مع التعليمة ‎@import.

الاستيراد

تملك CSS خيارُ الاستيراد الذي يتيح لك تقسيم ملفات CSS إلى أجزاء أصغر وأكثر ملائمةً للصيانة. العيب الوحيد فيه هو أنّه في كل مرة تستخدم قاعدة  ‎@import في CSS، فإنّها تُنشئ طلبيةً (request) أخرى لبروتوكول HTTP. تبني Sass على عمل التعليمة ‎@import الراهنة في CSS، ولكن بدلاً من أن ترسل طلبيةَ HTTP، فإنّها تأخذ الملف الذي تريد استيراده وتدمجه مع الملف الذي تريد أن تستورد إليه كيلا تُخدِّم إلّا ملفَّ CSS واحدٍ إلى المتصفح.

لنفترض أنّ لديك ملفين اثنين للغة Sass أحدهما ‎_reset.scss والآخر base.scss. نريد أن نستورد الملف ‎_reset.scss في base.scss.

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

الملف base.scss:

// base.scss

@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

لاحظ أننا استخدمنا ‎@import 'reset'‎ في الملف base.scss. لاحظ أنَّه لن تحتاج إلى تضمين الامتداد ‎.scss عند استيراد الملف، إذ لغة Sass ذكيةٌ وستخمّن ذلك لوحدها. عند إنشاء ملف CSS، ستحصل على:

html,
body,
ul,
ol {
  margin:  0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }

المخاليط (mixins)

بعض الأشياء في CSS قد تكون مملة للكتابة، خاصةً مع CSS3 وكثرة بادئات المتصفّحات. يتيح لك المخلوط (mixin) إنشاء مجموعات من تصريحات CSS والتي يمكنك إعادة استخدامها في جميع الملفات الأخرى. يمكنك كذلك تمرير قيم إلى المخلوط مما يجعله أكثر مرونةً. هناك عدة استخدامات نافعةٍ للمخاليط مثل بادئات المتصفّحات. إليك هذا المثال عن الخاصِّيَّة border-radius. 

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
     -ms-border-radius: $radius;
         border-radius: $radius;
}

.box { @include border-radius(10px); }

لإنشاء مخلوطٍ، استخدم التعليمة ‎@mixin ومرّر إليها اسمًا. لقد سمّينا المخلوط السابق بالاسم border-radius ووضعنا المتغير ‎$radius بين قوسين حتى نتمكن من تمرير قيمة نصف القطر متى شئنا. بعد إنشاء المخلوط، يمكنك استخدامه كما تستخدم تصريحات CSS باستعمال التعليمة ‎@include متبوعًةً باسم المخلوط. سيبدو ملف CSS الناتج كما يلي:

.box {
   -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
       -ms-border-radius: 10px;
           border-radius: 10px; }

التوسعة والوراثة (Extend/Inheritance)

هذه واحدةٌ من الميزات الأكثر فائدة في Sass. ستتيح لك القاعدة ‎@extend مشاركة مجموعة من خاصيات CSS بين المحدِّدات، وستساعدك على تجنب التكرار. سنحاول في المثال التالي إنشاء سلسلة بسيطة من رسائل الأخطاء والتحذيرات والنجاحات باستخدام ميزةٍ أخرى تعمل جنبًا إلى جنبٍ مع التوسعة ألا وهي الأصناف النائبة (placeholder classes). الأصناف النائبة هي نوعٌ خاصّ من الأصناف لا تُطبع إلّا عند توسيعها، ويمكن أن تساعد في جعل ملفات CSS نظيفة وأنيقة.

//لم تُوسّع على الإطلاق %equal-heights الناتج لأنّ CSS لن يُطبع هذا في ملف

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
//قد وُسِّعت %equal-heights الناتج لأنّ CSS سيُطبع هذا في ملف
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

الكود البرمجي أعلاه يجعل المحدّدات ‎.message و ‎.success و ‎.error و ‎.warning تتصرف كما يتصرّف المحدّد ‎‎%message-shared. هذا يعني أنَّه في أي مكان يظهر ‎%message-shared فإنّ ‎.message و ‎.success و ‎.error و ‎.warning ستظهر كذلك. يحدث ذلك في ملف CSS المُنشأ، إذ يحصل كل صنفٍ من هذه الأصناف على نفس خاصيات CSS التي لدى ‎%message-shared. سيساعدك هذا على تجنب كتابة الكثير من أسماء الأصناف لتمييز عناصر HTML.

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

عندما تنشئ ملف CSS، فإنّه سيبدو هكذا: (لاحظ أنّ ‎%equal-heights لا يُطبع لأنّه لم يُستخدم مطلقًًا).

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }

العوامل (operators)

استخدام الرياضيات في CSS يمكن أن يكون مفيدًا للغاية. لدى Sass عددٌ من العوامل الرياضيَّة القياسيَّة مثل + و - و * و / و%. سنجري في المثال التالي بعض العمليات الرياضيَّة البسيطة لحساب عرض العنصرين aside و article.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

لقد أنشأنا شبكةً مرنةً (fluid grid) بسيطة، عرضها الكلّي 960px. تسمح لنا عومل Sass بفعل أشياء مثل أخذ قيم واحدتها البكسل (px) وتحويلها إلى نسب مئوية دون جهد كبيرٍ. سيبدو ملف CSS الناتج هكذا:

.container {
  width: 100%; }

article[role="main"] {
  float: left;
  width: 62.5%; }

aside[role="complementary"] {
  float: right;
  width: 31.25%; }

مصادر

• صفحة Sass Basics في موقع Sass الرسمي.