Sass/guide
لغة CSS لغة ممتعةٌ، ولكنّ ملفات الأنماط صارت أكبر وأكثر تعقيدًا، وصارت صيانتها أصعب. وهنا يمكن أن تساعدنا المعالجة الأولية. تتيح لك Sass استخدام ميزات غير موجودة في CSS، مثل المتغيرات والتشعب والمخاليط والوراثة وغيرها من الأشياء التي تجعل البرمجة بلغة CSS ممتعةً مرةً أخرى.
تحفظ Sass الملفات المعالجة على هيئة ملف CSS عادي، والذي يمكنك استخدامه في موقعك.
الطريقة المباشرة لفعل ذلك هي باستخدام سطر الأوامر (terminal). فبمجرد تثبيت Sass، يمكنك تصريف ملفات Sass إلى CSS باستخدام الأمر sass. ستحتاج إلى إخبار Sass بالملف الذي تريد تصريفه، وكذلك أين سيُخرج ملف CSS الناتج. على سبيل المثال، تنفيذ التعليمة sass input.scss output.css في سطر الأوامر سيأخذ الملف input.scss ويُصرّفه إلى الملف output.css.
المتغيرات
المتغيرات هي وسيلة لتخزين المعلومات التي تريد أن تستخدمها أكثر من مرّةٍ في ملف الأنماط خاصتك. يمكنك تخزين أشياء مثل الألوان أو مجموعات الخطوط أو أيّ قيمة من قيم CSS ترى أنك ستحتاج إلى استخدامها. تستخدم Sass الرمز $ لإنشاء المتغيرات. إليك هذا المثال:
صياغة SCSS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
عندما يُعالَج ملف Sass، فإنه يأخذ المتغيرين $font-stack و $primary-color اللذين عرّفناهما ويُخرج ملف CSS عادي مع تعويض المتغيرين بقيمهما في ملف CSS. يمكن أن يكون هذا مفيدًا جدًّا عند استخدام ألوان خاصة بهوية الشركة البصرية لجعل الموقع متناسقًا.
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
التشعّب (nesting)
عند كتابة ملفات HTML، فلا شكّ أنّك لاحظت أنها مبنية على تسلسل متشعّب. لكنّ لغة CSS، من ناحية أخرى، ليست كذلك.
تسمح لك Sass بأن تُنظّم مُحدّدات CSS بنفس الطريقة التشعبيّة التي تجدها في ملفات HTML. ولكن تذكّر أنّ المبالغة في تشعيب القواعد سيؤدي إلى إنتاج قواعد CSS لها درجة تحديد كبيرة، وهو أمرٌ يُعدّ من الممارسات السيئة عمومًا.
مع أخذ ذلك بالحسبان، إليك مثالًا لبعض الأنماط المعتادة لقائمة التنقل في مواقع الويب:
صياغة SCSS:
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 مُتشعّبة داخل المحدد navselector. هذه طريقة جيدة لتنظيم ملف 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.
صياغة SCSS:
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// 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.
صياغة SCSS:
@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 نظيفة وأنيقة.
صياغة SCSS:
لن يُطبع هذا في ملف CSS الناتج لأنّ %equal-heights لم تُوسّع على الإطلاق//
%equal-heights {
display: flex;
flex-wrap: wrap;
}
سيُطبع هذا في ملف CSS الناتج لأنّ %equal-heights قد وُسِّعت//
%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 #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
العوامل (operators)
استخدام الرياضيات في CSS يمكن أن يكون مفيدًا للغاية. لدى Sass عددٌ من العوامل الرياضية القياسية مثل + و - و * و / و%. في المثال سنقوم ببعض الرياضيات البسيطة لأجل حساب عرض العنصرين aside و article.
صياغة SCSS:
.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%;
}