تخرج الكثير من الأدوات والأساليب في كل فترة لتسهل علينا إستخدام تقنيات الويب وكذلك عمل التطبيقات في وقت أقل، في تقنية CSS يوجد أسلوب القصد منه تقليل كتابة الشفرات وإستخدام مراجع كالمتغيرات وإستخدامها كقيم لخصائص CSS في كل مرة نحتاج إلى نفس القيمة في أكثر من صنف CSS مثل إستخدام نفس اللون أو نفس الخط كذلك محاكاة عمل الدوال في اللغات البرمجية الأخرى وإستخدام نفس الأسلوب في تقنية CSS عن طريق تقنية Less الذي سأشرح عنه.
هذا الموضوع يعرض نبذة عن تقنية Less CSS*مع مثال عملي له، وكيفية إستخدام هذه التقنية بأكثر من طريقة، الغرض من هذا التقنية هو تقليل وقت كتابة شفرة CSS خصوصاً مع العمل على تنسيق لمواقع كبيرة أو صفحة تحتاج للمزيد من التنسيق أو إستخدام قيم لخواص CSS أكثر من طريقة.
إحترت في إختيار مسمى للموضوع، لأن Less تعتبر لغة stylesheet ويمكن أن تكون أسلوب في نفس الوقت ولا أرى أنها أداة لأنها تعتمد على أكثر من أداة كما ستشاهدها في الموضوع، فلم أجد غير تقنية Less CSS كعنوان للموضوع.
[h=3]Less CSS*كأسلوب[/h]أسلوب هذه التقنية يهدف إلى تقليل عدد الأسطر أثناء عملية التكويد أو كتابة شفرات CSS، ويتكون هذا الأسلوب من خمسة أساسيات وهي مميزاته في نفس الوقت وتشبه بشكل كبير أسلوب كتابة الشفرات في البرمجة.
[h=4]المتغيرات Variables[/h]تتيح المتغيرات إمكانية حفظ القيم لإعادة إستخدامها في شفرة CSS مرة أخرى، وميزة إستخدام المتغير أنه تحتاج إلى تعديل قيمته مرة واحدة لتغيير قيم خصائص CSS التي تستخدم المتغير، مثال على ذلك:

@color: #000000;

h2 {
color: @color;
}
.single-post p {
color: @color;
}
ستكون تنيجة إستخدام المتغير بعد تحويل الشفرة إلى شفرة CSS:


h2 {
color: #000000;
}
.single-post p {
color: #000000;
}

[h=4]الدوال Mixins[/h]يمكن تسميتها بالأصناف ولكن سميتها بالدوال لتسهيل الفكرة، تتيح الدوال إمكانية إستخدام مجموعة خصائص CSS تحمل إسم دالة معينة لإستخدامها في وصف أو صنف CSS عدة مرات وإذا أردت تعديلها فإنك تعدل محتوى الدالة وسيتم إعادة إستخدامها مرة أخرى في بقية الأوسمة والأصناف التي ترغب في إستخدام خصائص CSS معينة فيها، كما يمكن أن تحمل الدالة متغيرات معينة، مثال على ذلك:

.rounded-corners (@radius: 5px) { /* القيمة الإفتراضية لمتغير radius */
border-raduis: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
/* إستخدام المتغير عدة مرات لعدة خصائص */
}

#header {
.rounded-corners;
}

#sidebar {
.rounded-corners(10px);
}

#footer {
.rounded-corners(15px);
}
ستكون نتيجة إستخدام دالة .rounded-corners بعد تحويل الشفرة إلى شفرة CSS:

#header {
border-raduis: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#sidebar {
border-raduis: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#footer {
border-raduis: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
[h=4]التداخل Nested Rules[/h]بدلاً من إعادة كتابة أصناف طويلة أو أصناف تابعة لصنف معين، ميزة التداخل تتيح إمكانية كتابة الأصناف بداخل صنف آخر بطريقة مختصرة لكي تظهر بشكل منظم، مثال على ذلك:

.post {
h2 {
font-size: 26px;
font-weight: bold;
}

p {
font-size: 13px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
ستكون نتيجة تداخل الأصناف مع بعضها بعد تحويل الشفرة إلى شفرة CSS:

.post h2 {
font-size: 26px;
font-weight: bold;
}

.post p {
font-size: 13px;
}

.post p a {
text-decoration: none;
}

.post p a:hover {
border-width: 1px;
}
لاحظ أن طريقة إنشاء المحدد hover كانت بوضع علاقة & وذلك ليكون إمتداد للوسم a لا أن يعتبر أحد الأصناف الفرعية له.
[h=4]العمليات الحسابية Operations[/h]العمليات الحسابية يمكن إستخدامها في أسلوب Less وقد لاتحتاجها دائماً، فيمكن إستخدام عملية الضرب والجمع والطرح في المتغيرات التي تحتوي على أرقام مثل الألوان. على سبيل المثال، لديك متغير بإسم @base-color وقيمته #111 واستخدمته في أحد أصداف CSS، وتريد إستخدامه في صنف آخر ولكن مع ضرب قيمة المتغير بالرقم 5 لكي تصبح قيمته #555، مثال على ذلك:

@base-color: #111;

body {
background-color: @base-color;
}

#page {
background-color: @base-color*5;
}
ستكون نتيجة إستخدام العملية الحسابية في الشفرة السابقة بعد تحويل الشفرة إلى شفرة CSS:


body {
background-color: #111;
}

#page {
background-color: #555;
}
[h=4]الجمل الشرطية[/h]يمكن إستخدام الجمل الشرطية في أسلوب Less مثل دالة if الشرطية الموجودة في لغات البرمجة، ولكن في أسلوب Less يتم إستخدام كلمة when بدلاً من if، فمثلاً لو أردت إستخدام متغير إفتراضي إسمه type في دالة ووضعت شرط إذا كان المتغير كان يساوي fast أضع له محتوى خاص للدالة أو كان يساوي normal أضع له محتوى آخر، مثال على ذلك:

.fast-reset (@type: fast) when(@type=fast) {
margin: 0;
padding: 0;
}

.fast-reset (@type: fast) when(@type=normal) {
margin: 0;
padding: 0;
border: 0 none;
text-decoration: none;
font-size: 100%;
}
ويمكن إستخدام الدالة مع تحديد قيمة type او حتى عدم تحديد قيمة type لأنه سيتم إستخدام القيمة الإفتراضية التي تم تحديدها، مثال على ذلك:

body {
.fast-reset(fast);
}
ويتكون نتيجة إستخدام دالة fast-reset في الوسم body بعد تحويل الشفرة إلى شفرة CSS:

body {
margin: 0;
padding: 0;
}
[h=3]طرق إستخدام*Less CSS[/h]هناك أكثر من طريقة لإستخدام هذا الأسلوب عبر عدة أدوات، والطريقة الأسهل هي عبر مكتبة less.js والتي يجب إرفاقها في صفحة HTML وإرفاق ملف style ولكن بصيغة less بدلاً من css لتصبح style.less وتضيف قيمة إلى عنوان الصفحة في متصفح الويب لمشاهدة الصفحة بالتنسيق المبني على مكتبة less.js.

لإستخدام مكتبة less.js، أضف هذه الشفرة إلى ملف HTML (في عنصر head بالتحديد):


بعد ذلك يجب إنشاء ملف بإسم style.less (أو بأي إسم تريده بشرط يكون بإمتداد less ويكون مربوط بصفحة HTML كما هو واضح في الشفرة السابقة) .. وأبدأ بكتابة خصائص CSS وتحديد الأوسمة والأصناف بإستخدام أسلوب Less CSS. هناك أدوات أخرى تعمل كتطبيقات سطح المكتب مثل أدوات الترجمة Compiling الخاصة لتحويل الشفرة المكتوبة بأسلوب Less إلى شفرة CSS:
[h=4]WinLess (لنظام ويندوز)[/h]
[h=4]SimpLESS (لنظام ويندوز/ماك/لينكس)[/h]