تخرج الكثير من الأدوات والأساليب في كل فترة لتسهل علينا إستخدام تقنيات الويب وكذلك عمل التطبيقات في وقت أقل، في تقنية 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]
[h=4]Less.app*(لنظام الماك)[/h]
تتطلب منك هذه التطبيقات سحب ملف المكتوب بصيغة less وإسقاطه على نافذة التطبيق وعند حفظ الملف المكتوب بصيغة less يقوم بعملية التحويل إلى ملف بصيغة CSS وإذا كان هناك خطأ أو عدم إستخدام قواعد هذا الأسلوب بشكل جيد يتم إخبارك بوجود خطأ ولا تتم عملية التحويل إلا بعد إصلاحه.
[h=3]مثال عملي لإستخدام*Less CSS[/h]هذا مثال عملي بسيط لإستخدام أسلوب Less في كتابة تنسيق CSS لصفحة HTML، سوف أستخدم مكتبة less.js*لسرعة التطبيق ورؤية النتيجة على متصفح الويب مباشرةً حتى أنه لا تحتاج إلى عمل تحديث للصفحة لأنه بمجرد تحديث ملف المكتوب بصيغة less سيتم تحديث الصفحة تلقائياً. في البداية يجب إنشاء صفحة HTML وإستخدام مكتبة less.js بإضافة هذه الشفرة إلى عنصر head في صفحة HTML:


يمكن تحميل المكتبة مباشرةً من موقع المكتبة أو إستخدام رابط مباشر من عنوان المكتبة في موقع Google Code كما هو موجود في الشفرة السابقة، وبما أن إسم الملف المستخدم في الشفرة السابقة هو style.less سيتم إنشاء ملف جديد يحمل هذا الأسم للبدء بكتابة شفرة CSS ولكن بأسلوب Less، هذه الشفرة التي كتبتها بأسلوب Less لهذا المثال وتوجد تعليقات فيه لتوضيح عمل كل ما يتعلق بإستخدام قواعد هذا الأسلوب:

/* دالة خاصة لتصفير الأصناف والأوسمة
وإستخدمت متغير type
لتحديد طريقة التصفير */
.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%;
}

/* دالة لإستخدام الخطوط الخاصة بواسطة خاصية @font-face
وستحتاج بعد ذلك لتحديد إسم الخط وعنوانه فقط وهذه الدالة ستكمل باقي العمل */
.font-face (@fontFamily, @fontUrlName) {
font-family: @fontFamily;
src: url("fonts/@{fontUrlName}.eot"); /* IE 9 */
src: url("fonts/@{fontUrlName}.eot?") format("eot"), /* IE 6-8 */
url("fonts/@{fontUrlName}.otf") format("opentype"), /* Other browsers */
url("fonts/@{fontUrlName}.ttf") format("truetype"); /* Safari, Android, iOS */
}

/* بعض المتغيرات الخاصة بالألوان وأنواع الخطوط لإستخدامها لاحقاً */
@bodyBackgroundColor: #f8f8f8;
@postBackgroundColor: #fff;
@normalWidth: 960px;
@fontColorForPostHeading: #720606;
@fontColorForBoxHeading: #823a00;
@fontColorForParagraph: #363a3c;
@fontTypeForParagraph: 'Droid Naskh Regular', Arial, sans-serif;
@fontTypeForHeading: 'Hacen Liner Screen', Arial, sans-serif;

@font-face { /* Upload Hacen Liner Screen */
.font-face("Hacen Liner Screen", hacen_liner_screen);
/* إستدعاء خط حسن */
}

@font-face { /* Upload Droid Naskh Regular font */
.font-face("Droid Naskh Regular", droidnaskhregular);
/* إستدعاء خط أندرويد */
}

body {
.fast-reset; /* إستخدام التصفير السريع */
direction: rtl;
text-align: center;
background-color: @bodyBackgroundColor;
}

/* دالة border-radius
للحواف الدائرية */
.border-radius(@radius: 5px) { /* القيمة الإفتراضية */
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

#wrap {
text-align: right;

/* بعض المتغيرات */
@borderColor: #2d3a44;
@padding: 10px;

.small-box {

background-color: #e2e3e4;
h1 {
margin: 0;
font: bold 27px @fontTypeForHeading;
color: @fontColorForBoxHeading; /* إشارة إلى قيمة متغير مكتوب سابقاً */
}

}

.post {
color: @fontColorForPostHeading;
background-color: @postBackgroundColor;
h2 {
font: bold 27px @fontTypeForHeading; /* تحديد نوع الخط عن طريق قيمة متغير مكتوب سابقاً */
}
}

.small-box, .post {
.border-radius(10px); /* إستخدام دالة border-raduis للحواف الدائرية ولكن بقيمة أخرى */
border: 1px solid @borderColor; /* إستخدام لون حدود عبر متغير مكتوب سابقاً */
margin: 20px auto;
width: @normalWidth; /* إستخدام متغير مكتوب سابقاً لوضع قيمة عرض الصنف */
padding: @padding; /* إستخدام قيمة متغير مكتوب مسبقاً خاص بمسافة الصنف الداخلية */
p {
color: @fontColorForParagraph; /* تحديد لون الخط عبر قيمة متغير مكتوب سابقاً */
font: 14px/25px @fontTypeForParagraph; /* تحديد نوع الخط عن طريق قيمة متغير مكتوب سابقاً */
}
}
}
بعد الإنتهاء من كتابة الشفرة السابقة وحفظ الملف إفتح صفحة HTML في متصفح الويب مع إضافة هذه القيمة #!watch إلى نهاية عنوان الصفحة وفتح الصفحة من جديد لمشاهدها بتنسيق CSS الذي قمت بكتابته بأسلوب Less .. هذه شفرة CSS كاملة بعد كتابتها في ملف style.less:

@font-face {
font-family: "Hacen Liner Screen";
src: url("fonts/hacen_liner_screen.eot"); /* IE 9 */
src: url("fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 */
url("fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers */
url("fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
font-family: "Droid Naskh Regular";
src: url("fonts/droidnaskhregular.eot"); /* IE 9 */
src: url("fonts/droidnaskhregular.eot?") format("eot"), /* IE 6-8 */
url("fonts/droidnaskhregular.otf") format("opentype"), /* Other browsers */
url("fonts/droidnaskhregular.ttf") format("truetype"); /* Safari, Android, iOS */
}
body {
margin: 0;
padding: 0;
direction:rtl;
text-align:center;
background-color:#F8F8F8;
}
#wrap {
text-align:right;
}
#wrap .small-box {
background-color:#E2E3E4;
}
#wrap .small-box h1 {
color:#823A00;
font-family: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
margin: 0;
padding: 0;
}
#wrap .post {
background-color:#FFFFFF;
color:#720606;
}
#wrap .post h2 {
font: bold 27px 'Hacen Liner Screen', Arial, sans-serif;
}
#wrap .small-box, #wrap .post {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #2D3A44;
margin: 20px auto;
padding: 10px;
width:960px;
}
#wrap .small-box p, #wrap .post p {
color:#363A3C;
font: 14px/25px 'Droid Naskh Regular', Arial, sans-serif;
}
ملاحظة: يجب إستخدام مكتبة less.js فقط لغرض التطوير لا لإعتماد إمتداد .less بدلاً من إمتداد .css في صفحات الويب، لذا يمكنك إستخدام تطبيقات سطح المكتب التي