تُعتبر بساطة CSS إحدى أهم الخواص المُميزة والمرغوبة فيه، حيث أن أوراق أنماط CSS ما هي سوى قوائم طويلة من الأوامر والتي تُحدد كل واحدة منها مُنتقيا selector وبعضا من الأنماط التي يجب تطبيقها عليه. لكن وبحكم أن مواقعنا وتطبيقاتنا أصبحت تكبر أكثر فأكثر وزادت درجة تعقيدها مع ذلك، كما أنها أصبحت تستهدف أجهزة وأحجام شاشات مُختلفة، فإن البساطة التي تُميز CSS سرعان ما تُصبح ثقلا على كاهل المُبرمجين بحكم أن الأمر لم يعد مُتعلقا فقط ببعض الخواص القاعدية.

في حين أن البعض قد اقترح حلولا لمشاكل CSS عبر إضافة المُتغيرات والثوابت إليها مثلا إلا أن المُتصفحات امتنعت عن استخدامها ودعمها. وحتى ولو قام أي من المُتصفحات بدعم نسخة جديدة أكثر تطورا من CSS، فإن الأمر سيحتاج إلى سنوات ليتم تعميم الأمر على جميع المُتصفحات مما يجعل من الاعتماد عليه فكرة غير صائبة.

لكن لحسن الحظ اقترح منذ بضعة سنين المُطوران Hampton Catlin وNathan Weizenbaum طريقة أفضل للتعامل مع أوراق الأنماط المعقدة. بما أن المُتصفحات ليست مُستعدة لاعتماد إصدار جديد من CSS وجد المُطوران بأنه بإمكانهما تصميم تراكيب (syntax) جديدة لأوراق الأنماط تجعل من مهمة كتابة وصيانة تلك الأوراق أسهل، حيث يكفي استخدام مُعالج قبلي preprocessor لترجمة التركيب الجديد إلى التركيب القديم المُعتمد في أوراق CSS التي نعرفها.

تم إطلاق اسم Sass على التركيب الجديد والذي هو اختصار لـ syntactically awesome style sheets. الإصدارات الأولى من Sass كان مُختلفة جدا عن CSS الكلاسيكي، فعلى سبيل المثال لم يكن هناك وجود لأي حاضنات curly braces، كما أنه وجب تسنين indent الخواص على نحو مُعين وبعدد مُحدد من المسافات لتجنب ظهور أخطاء لدى ترجمة الملف. لم يمنع الأمر المُبرمجين الذين اعتادوا على تعلم لغات برمجة جديدة والاستمتاع بذلك من التعامل مع هذه اللغة ولم يجدوا مُشكلا مع التراكيب الجديدة التي أتت بها Sass.، لكن الأمر كان مُختلفا مع المُصممين الذين رأوا أن البنية اللغوية لـ Sass كانت مُختلفة جدا عن الـ CSS الذي ألفوه ولذلك لم يرغبوا في استخدامه. المُشكل الآخر هو أن الاختلاف في البُنية اللغوية مع CSS الكلاسيكية جعل من مهمة الاستفادة من Sass في المشاريع الحالية أمرا مستحيلا من دون إمضاء الكثير من الوقت لترجمة ملفات CSS الحالية إلى Sass.

ولدرء هذه المشاكل عمد المُطورون في الإصدار 3.0 من Sass إلى إضافة بُنية لغوية جديدة أقرب ما تكون من بنية CSS والتي أطلقوا عليها اسم SCSS أو Sassy CSS. يوصف SCSS عادة بأنه "مُجمع صارم" Strict Superset أو لغة مُترفعة مشتقة من CSS وهو الأمر الذي يعني بأن أي ملف يُعتبر صحيح البُنية في CSS سيكون صحيح البُنية في SCSS أيضا. بعبارة أخرى يُمكنك استخدام ملفات CSS الحالية مع معالج Sass القبلي من دون أية مشاكل، مما سيسمح لك بتعلم واستخدام بعض خواص Sass دون الحاجة إلى تعلم جميع الخواص لاستخدامه.

عكس ما هو الحال مع CSS العادي فإنه يُمكن اعتبار Sass/ SCSS لغة برمجية scripting language بكل ما تحمله الكلمة من معنى، حيث أنه يدعم العديد من خواص لغات البرمجة مثل: expressions،functions، variables، conditional logic، و loops. بطبيعة الحال أنت في غنى عن استعمال كل هذه الخواص دفعة واحدة، لكنها قيد إشارتك لما تكون في حاجة إليها، بل وستجعل من مهمة كتابة أوراق أنماط مُعقدة -والتي عادة ما تحتوي على شفرات مُكررة- أمرا في غاية السهولة.

سنستعرض في هذا المقال جُملة من قواعد Sass/SCSS لإعطائك فكرة واضحة عما يُمكنك القيام به باستخدام هذه اللغة الجديدة، وسنختم بجُملة من الروابط والكتب إن رغبت في الذهاب بعيدا معها.

ولإبقاء الأمر بسيطا قدر الإمكان فإننا سنركز في أغلب الأمثلة التي سنستعرضها هنا على شفرة SCSS فقط وليس شفرة CSS التي تنتج عنها بعد ترجمتها. بطبيعة الحال فإن أفضل طريقة لتعلم Sass هي أن تقوم تجربها بنفسك وتكتب بعض الشفرات ثم تلاحظ ملفات CSS التي تنتج عن ذلك. يُمكن إيجاد جميع الأمثلة المعروضة هنا إضافة إلى ملفات CSS التي تنتج عنها على هذا المُستودع على Github.

البداية

تمت كتابة Sass بلغة روبي، ويتم توزيعها عبر مدير الحزم الخاص بها والمعروف باسم RubyGems. سيكون بإمكان الذين يستعملون روبي أو الذين لا يجدون صعوبة في التعامل مع سطر الأوامر تنصيب Sass بسهولة باتباع التعليمات الموجودة على موقع Sass، أما من يجب صعوبة في ذلك أو لم يسبق له التعامل مع روبي فإنه بإمكانه الاعتماد على تطبيق Scout على نظامي Windows وmac والذي يأتي مجهزا بروبي وبـ Sass (إن كنت على نظام لينكس فإنه يفترض بك أن تكون مرتاحا مع سطر الأوامر وبالتالي... ).

سواء نصبت Sass عبر سطر الأوامر أو عبر تطبيق Scout فإن مبدأ العمل يبقى نفسه، حيث تتم مراقبة ملفات SCSS الخاصة بك وفي كل مرة يتم إدخال تحديثات عليها وحفظها تتم ترجمة ذلك إلى ملف CSS كلاسيكي. نطلق اسم مجلد المُدخلات Input Folder على المُجلد الذي يحتوي ملفات Sass ويتم حفظ ملفات CSS الناتجة في مُجلد يُطلق عليه اسم مجلد المخرجات Output Folder. يُمكن لأحد هذه المُجلدين أن يكون داخل الآخر، بل من الشائع أن يكون مجلد المُدخلات والذي يُمكن أن نسميه بـ scss داخل مجلد أوراق الأنماط الخاصة بمشروعك والذي نسميه css على النحو التالي:

my_project/
  index.html
  css/
    main_style.css
    scss/
      main_style.scss 
      _mixins.scss
      _colors.scss

في المثال السابق، يُطلق على الملفات التي تبدأ أسماؤها بمحرف _ داخل مُجلد scss وصف partials وتوصف بذلك لأنها عبارة عن أوراق أنماط جزئية يتم استيرادها في ملفات SCSS الرئيسية.

استخدم الملفات الجزئية لتنظيم شفرتك

يوفر CSS تعليمة @import لاستيراد ملفات css إضافية، وعادة ما يعمد المُطورون إلى استخدام هذه التعليمة لتقسيم المشاريع الكبيرة إلى ملفات صغيرة الحجم لتسهيل مهمة صيانتها. فعلى سبيل المثال يُمكن لملف main_style.css الرئيسي أن لا يحتوي سوى على مجموعة من تعليمات @import على النحو التالي:

@import url('/shared/global.css');
@import url('/pages/home.css');
@import url('/pages/blog.css');

بطبيعة الحال فإنه لا يُنصح بالقيام بذلك نظرا للآثار التي ستترتب عن ذلك، حيث أن كل سطر عبارة عن ملف إضافي يجب على المُتصفح تحميله مما قد يسبب ثقلا في تحميل موقعك وبالتالي تراجعا في تقييمي Yslow وgoogle Page Speed الخاصين بموقعك.

يسمح Sass بتقسيم الملفات إلى ملفات جزئية Partials بنفس الطريقة السابقة واستيرادها باستعمال نفس التعليمة @import، لكن لدى ترجمة ملفات Sass إلى CSS فإنه سيتم تضمين كامل الشفرة في ملف واحد.

@import 'shared/global';
@import 'pages/home';
@import 'pages/blog';

ينتج عن الكود السابق ملف CSS واحد فقط. يُمكن لـ Sass القيام بعملية minification لملف CSS الناتج والتخلص من كل المسافات الزائدة وذلك لتحسين أداء الموقع لدى وتقليص زمن تحميله.

هناك أمر يجب أخذه بالحسبان وهو أن الملفات الجزئية هي ملفات من نوع خاص خاصة بـ SCSS ليست مُعدة لتُستعمل كملفات CSS كلاسيكية، ويجب القيام باستيرادها باستخدام تعليمة @import لأخذها بالحسبان. كما تبدأ أسماء الملفات الجزئية بالمحرف "_”، حيث أن pages/home في المثال السابق تقوم باستيراد ملف pages/_home.scss . يسمح مُحرف _ لـ Sass بمعرفة أن الملف عبارة عن ملف جزئي وبالتالي يتجنب ترجمته إلى ملف CSS مستقل بذاته.

لا تكرر ما تقوم به

بعد أن أصبحت أوراق الأنماط خاصتنا أكثر تنظيما يتوجب علينا الآن التخلص من التكرار الموجود في محتواها.

إحدى أهم خواص Sass هي خاصية القواعد المُضمنة Nested rules. في ملفات CSS الكلاسيكية تأتي مُختلف القواعد بعضها تلو الأخرى، وعلى مُحدد كل قاعدة أن يشمل جميع عناصره:

body.home .media-unit {
  border: 1px solid #ccc;
  background-color: #fff;
}
body.home  .media-unit .right {
  border-left: 1px solid #ccc;
}
body.home .media-unit .right h1 {
  font-size: 24px;
}

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

body.home {
  .media-unit {
    border: 1px solid #ccc;
    background-color: #fff;
    .right {
      border-left: 1px solid #ccc;
      h1 {
        font-size: 24px;
      }
    }
  }
}

بعد ترجمة هذه الشفرة فإننا سنحصل على نفس الشفرة السابقة. للأسف فإن الحجم الصغير لشفرة SCSS لا تنتج عنه بالضرورة شفرة CSS صغيرة الحجم أيضا أو سريعة التحميل، لكن استخدام القواعد المُضمنة من شأنه أن يبقي الشفرة أنظف، أكثر منطقية وأكثر تنظيما، وهي مزايا ستسهل من مهمة إدارة وصيانة هذه الشفرة مع مرور الوقت.

تسمح القواعد المُضمنة أيضا بتضمين media queries داخل قواعد أخرى، مما يجعل من السهل معرفة أي نمط يتم تنفيذه على أي من عناصر صفحتك:

.container {
  width: 940px;  // If the device is narrower than 940px, switch to 
  // a fluid layout
  @media screen and (max-width:940px) {
    width: auto;
  }
}

لدى ترجمة هذه الشفرة يقوم Sass بتحويله إلى شفرة CSS كلاسيكية وذلك عبر نسخ مُحدد .container داخل media query على النحو التالي:

.container {
  width: 940px;
}@media screen and (max-width:940px) {
  .container {
    width: auto;
  }
}

المتغيرات

متغيرات Sass مفيدة جدا لسببين: أولها وأكثرها أهمية هو تسهيل مهمة تعديل الشفرة وتجنيب التكرار، وثانيها هو تمكين المُطور من إعطاء أسماء خاصة لبعض الخواص خاصة الألوان مما يزيد من مقروئية الشفرة ويسهل فهمه.

على موقع Typekit مثلا نجد أن العديد من العناصر تستخدم اللون #99CC00 أو ما يُطلق عليه مطورو الموقع اسم Typekit green اختصارا. وبما أنه يتم استخدام هذا اللون في جميع أجزاء الموقع بدءا بالأزرار ووصولا بالعناوين الرئيسية، فإنه، وفي حالة أردنا تغيير هذا اللون الأخضر إلى لون آخر يجب علينا استبداله هذه القيمة بقيمة أخرى أينما ظهرت على ملف CSS. لكن في حال استخدام متغيرات Sass بدل القيمة الست عشرية آنفة الذكر فإنه يكفي تغيير قيمة المتغير المعني بهذا اللون (والذي يُمكن تعريفه في بداية الملف أو حتى في الملفات الجزئية) حتى يتم تغييره في جميع عناصر الصفحة بشكل آني وآلي. يُمكن أيضا استخدام المتغيرات لإعطاء قيم لمتغيرات أخرى مما يسهل من الحفاظ على أنماطك أكثر تنظيما:

$typekit-green: "#99cc00";
$typekit-link-color: $typekit-green;a {
  color: $typekit-link-color;
}

بإمكانك أيضا أن تعطي هذه المتغيرات تقريبا أي قيمة ترغب فيها، وتماما مثلما أفادتنا هذه المُتغيرات مع الألوان فإنها ستفيدنا أيضا مع الخطوط:

$sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial,  
Helvetica, 'Liberation Sans', sans-serif;
$serif-font: 'ff-tisa-web-pro', Georgia, Times, serif;.banner h1 {
  font-family: $sans-serif-font;
}

MIXINS

Mixins عبارة عن مجموعة من القواعد أو الخواص التي يُمكنك تضمينها أو "دمجها' مع قواعد أخرى. نقوم بتعريف هذه المجموعات باستخدام التعليمة @mixin ونقوم بتضمينها في قواعد أخرى باستخدام @include.

في المثال التالي نطلب من Sass أن يقوم بتنفيذ جميع الخواص الموجودة في مجموعة خواص highlighted-bold-text على عناصر span الموجودة داخل result-with-highlights:

$highlight-color: #ffa;@mixin highlighted-bold-text {
  font-weight: bold;
  background-color: $highlight-color;
}.result-with-highlights {
  span {
    @include highlighted-bold-text;
  }
}

يكفي أن تقوم بتعريف الـ mixin مرة واحدة حتى يُصبح بإمكانك استخدامه أينما شئت في نفس الملف. في المثال التالي تتم إضافة جميع خواص الـ mixin الذي قمنا بتعريفه سابقا إلى الصنف الذي يحمل الاسم highlighted:

.highlighted {
  @include highlighted-bold-text;
}

هذا الأمر مفيد خاصة لدى القيام بإضافة خواص CSS3 على بعض العناصر مع الرغبة في ضمان ظهور هذه العناصر على نفس الشكل على جميع المُتصفحات وذلك باستخدام البادئات prefixes الخاصة بكل متصفح إضافة إلى توفير تراجع رشيق للمتصفحات التي لا تدعم تلك الخواص. عادة ما يكون التعامل مع مختلف البادئات في ملفات CSS الكلاسيكية أمرا مُزعجا نظرا لطولها وللحاجة إلى نسخها ولصقها في كل مرة. لكن مع mixins فإنه بالإمكان القيام بذلك بشكل أسرع ومن دون الوقوع في الأخطاء ومن دون الحاجة إلى كتابة الكثير من الشفرات.

في المثال التالي، نقوم بإضافة الحواف الدائرية بقيمة 4px على عنصر وذلك باستخدام بادئات كل من Webkit، Firefox وIE مع إضافة خاصية border-radius الخاصة بـ CSS3. كما أننا نقوم بتحديد قيمة الدوران في مُتغير وذلك لتسهيل مهمة تعديلها لاحقا:

@mixin rounded-corners {
  $rounded-corner-radius: 4px;
  -webkit-border-radius: $rounded-corner-radius;
  -moz-border-radius: $rounded-corner-radius;
  -ms-border-radius: $rounded-corner-radius;
  border-radius: $rounded-corner-radius;
}.button {
  @include rounded-corners;
}

يُمكن للـ mixins احتواء قواعد مُضمنة كاملة وليس مجرد خواص. المثال التالي يُوضح كيف يُمكن كتابة clearfix CSS باستخدام Sass mixin:

@mixin clearfix {
 // For modern browsers
  &:before,
  &:after {
    content:"";
    display:table;
  }  &:after {
    clear:both;
  }  // For IE 6/7 (trigger hasLayout)
  & {
    zoom:1;
  }
}.group {
  @include clearfix;
}

رمز & في Sass يرمز إلى "العنصر الحالي"، حيث أنه ولدى ترجمة الملف يتم استبداله بـ المُحدد Selector الحالي. في المثال السابق سيتم استبداله بـ .group

أوراق أنماط أكثر ذكاء

استخدام mixins لتنفيذ أنماط مُعينة على بعض العناصر أمر مفيد جدا، لكن الأفيد والأروع هو إمكانية استخدام المتغيراتarguments تماما مثلما هو عليه الحال مع لغات البرمجة المُختلفة كـ JavaScript وPHP، كما يُمكن استخدامها مع خواص أخرى أكثر تقدما مثل التعابير expressions والدوال functions وذلك بغية الذهاب أبعد من مُجرد تنظيم أوراق الأنماط وتنفيذ أنماط أكثر تعقيدا.

تُعتبر Grid Layout systems إحدى أشهر استعمالات Sass. هناك العديد من أنظمة 960px الجاهزة لكن أغلبها يتطلب إضافة أسماء أصناف غير دلالية إلى شفرتك، هذا إلى جانب حاجتك إلى تحميل كامل النظام في مشروعك قبل استخدامه حتى ولو لم تكن ترغب في استخدام سوى جزء يسير منه.

في مثالنا الأخير في هذا المقال سنقوم بإنشاء نظام Grid Layout من 12 وحدة باستخدام Sass. بدل استخدام اسم خاص لكل وحدة سنوليmixin مهمة تحديد العرض والهوامش الأنسب لكل عنصر لتحويله إلى وحدة في النظام الشبكي الذي نقوم بإعداده.

بداية نحتاج إلى تحديد عرض كل عمود وهوامشه:

$column-width: 60px;    // 12 columns = 720px
$gutter-width: 20px;    // 11 gutters =

ومن ثم نطلب من Sass أن يقوم بحساب عرض كل وحدة بالنيابة عنا، حيث أن عرض كل وحدة يساوي مجموع أعراض الأعمدة التي يغطيها إضافة إلى الهوامش التي تتخللها، وبالتالي يُمكن حسابه على النحو التالي:

width: ($column-width * $span) + ($gutter-width * ($span – 1));

وعليه فإننا سنكتب mixin يقبل متغيرا واحدا (والمتمثل في عدد الأعمدة span)، سيتم محاذاة كل وحدة إلى اليسار، وإضافة هامش 20px بين الوحدات، كما أنه ستتم إضافة هامش على يمين كل وحدة بنفس القيمة:

@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

بالرغم من بساطة الشفرة السابقة فإنها في غاية القوة، حيث أنه بإمكاننا مثلا تنفيذ نمط قاعدي متكون من عمود يحتوي ثلثي المساحة وعمود آخر يحتوي الثلث الباقي على النحو التالي:

.container {
  @include clearfix;
  @include grid-unit(12);
  float: none;
  margin: 0 auto;
}.main-content {
  @include grid-unit(8);
}.sidebar {
  @include grid-unit(4);
  margin-right: 0;
}

وما هذا إلا جزء يسير مما يُمكن القيام به باستخدام Sass.

دعم Sass للعمليات الحسابية القاعدية يجعل من مهمة العمل على تصاميم مُتكيفة adaptive fluid-width layouts أسهل. في المثال التالي نستخدم "الوصفة" الخاصة بـ Ethan Marcotte لتحويل التصميم السابق إلى تصميم مُتكيف. بما أن Sass لا يقوم بالتحويل ما بين الوحدات ما لم يتم طلب ذلك بشكل صريح فإننا نقوم باستخدام الدالة percentage() للقيام بذلك:

.container {
// result = target / context
  width: percentage(940px / 960px);  .main-content {
    // This is nested inside of .container, so its context is 940px
    width: percentage(620px / 940px);
  }  .sidebar {
    width: percentage(300px / 940px);
  }
}

يتوفر Sass أيضا على دوال للتحكم في الألوان كالسطوع والدكانة والشفافية وما إلى ذلك على النحو التالي:

$base-link-color: #00f;
a {
  color: $base-link-color;
}
a:visited {
  // This reduces the lightness of the color (in HSL terms) 
  // by 50%, leaving hue and saturation alone
  color: darken($base-link-color, 20%);
}figcaption {
  // Generates an rgba() color value with 50% opacity
  background-color: transparentize(#fff, 50%);
}

إذا لم تكن هذه الدوال كافية في نظرك فإنه بإمكانك إضافة دوال أخرى و تشاركها وإعادة استخدامها ما بين مختلف مشاريعك عبر الملفات الجزئية. ألق نظرة على القائمة الكاملة لدوال Sass لتأخذ فكرة عما يُمكن لهذه الدوال أن تقوم به.

هل من مزيد؟

موقع Sass الرسمي يحتوي الكثير من المعلومات المهمة والمفيدة للراغب في تعلم Sass ويحتوي دليلا شاملا لكل خواص ومزايا SCSS.

أما لو كنت تفضل قراءة الكتب، فقد ترغب في قراءة كتاب Pragmatic Guide to Sass والذي شارك في تأليفه Hampton Catlin مطور Sass.

أما لو أردت الذهاب إلى أبعد من ذلك فقد ترغب في إلقاء نظرة على مكتبة Compass والتي تحتوي مجموعة كبيرة من دوال أنماط SCSS والتي تدعم كلا من ورقة التصفير CSS reset الخاصة بـ Eric Meyer، نظام الشبكات Blueprint Grid system، إضافة إلى العديد من خواص وتأثيرات CSS3، والتي يصفها مطورها بأنها “jQuery for stylesheets”.

إن كنت تستخدم تطبيق scout فإنك ستجد Compass متوفرة فيه بشكل مباشر، كما يُمكنك تنصيبه باتباع التعليمات المتوفرة على موقع المكتبة.

ترجمة -وبتصرف- للمقال Getting Started with Sass لصاحبه David Demaree