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

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

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

Less CSS كأسلوب

أسلوب هذه التقنية يهدف إلى تقليل عدد الأسطر أثناء عملية التكويد أو كتابة شفرات CSS، ويتكون هذا الأسلوب من خمسة أساسيات وهي مميزاته في نفس الوقت وتشبه بشكل كبير أسلوب كتابة الشفرات في البرمجة.

المتغيرات Variables

تتيح المتغيرات إمكانية حفظ القيم لإعادة إستخدامها في شفرة CSS مرة أخرى، وميزة إستخدام المتغير أنه تحتاج إلى تعديل قيمته مرة واحدة لتغيير قيم خصائص CSS التي تستخدم المتغير، مثال على ذلك:

@color: #000000;

h2 {
    color: @color;
}
.single-post p {
    color: @color;
}

ستكون تنيجة إستخدام المتغير بعد تحويل الشفرة إلى شفرة CSS:


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

الدوال Mixins

يمكن تسميتها بالأصناف ولكن سميتها بالدوال لتسهيل الفكرة، تتيح الدوال إمكانية إستخدام مجموعة خصائص 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;
}

التداخل Nested Rules

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

.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 لا أن يعتبر أحد الأصناف الفرعية له.

العمليات الحسابية Operations

العمليات الحسابية يمكن إستخدامها في أسلوب 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;
}

الجمل الشرطية

يمكن إستخدام الجمل الشرطية في أسلوب 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;
}

طرق إستخدام Less CSS

هناك أكثر من طريقة لإستخدام هذا الأسلوب عبر عدة أدوات، والطريقة الأسهل هي عبر مكتبة less.js والتي يجب إرفاقها في صفحة HTML وإرفاق ملف style ولكن بصيغة less بدلاً من css لتصبح style.less وتضيف قيمة إلى عنوان الصفحة في متصفح الويب لمشاهدة الصفحة بالتنسيق المبني على مكتبة less.js.

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

<script type="text/javascript" src="https://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

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

WinLess (لنظام ويندوز)

SimpLESS (لنظام ويندوز/ماك/لينكس)

Less.app (لنظام الماك)

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

مثال عملي لإستخدام Less CSS

هذا مثال عملي بسيط لإستخدام أسلوب Less في كتابة تنسيق CSS لصفحة HTML، سوف أستخدم مكتبة less.js لسرعة التطبيق ورؤية النتيجة على متصفح الويب مباشرةً حتى أنه لا تحتاج إلى عمل تحديث للصفحة لأنه بمجرد تحديث ملف المكتوب بصيغة less سيتم تحديث الصفحة تلقائياً. في البداية يجب إنشاء صفحة HTML وإستخدام مكتبة less.js بإضافة هذه الشفرة إلى عنصر head في صفحة HTML:

<script type="text/javascript" src="https://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

يمكن تحميل المكتبة مباشرةً من موقع المكتبة أو إستخدام رابط مباشر من عنوان المكتبة في موقع 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 في صفحات الويب، لذا يمكنك إستخدام تطبيقات سطح المكتب التي ذكرتها في الأعلى بدلاً من المكتبة لأنك ستعمل على ملف بإمتداد .less فقط بينما النتيجة ستكون في ملف جديد بإمتداد .cssوالذي ستستخدمه في الصفحة.

مقطع فيديو توضيحي

هذا مقطع فيديو قصير يوضح كتابة الخصائص والأوسمة والأصناف بأسلوب Less ونتيجة العمل كشفرة ِCSS صحيحة. (يفضل مشاهدته بصيغة 480p أو صيغة 720p أو رؤية المقطع في موقع يوتيوب)

أدوات أخرى مشابهة لأسلوب Less CSS

أدوات Less CSS ليست الوحيدة التي التي تختصر الوقت على المطور في كتابة الشفرات في تقنية CSS، بل يوجد أداة أخرى مشابهة مع إختلاف طريقة كتاباته قليلاً عن Less CSS وهي أداة Sass وتحتاج إلى تنصيب لغة Ruby في الجهاز (إذا كنت من مستخدمي نظام ويندوز) ويتم تحميله عبر سطر الاوامر من موقع GitHub .. وأرى أن Less CSS أسهل من ناحية التنصيب فيمكن إستخدام لغة Javascript أو الأدوات التي وضعتها في الأعلى.

هناك أداة أخرى وهي لغة CoffeeScript (أو أداة CoffeeScript) تعمل بنفس النهج الموجود في Less CSS ولكنها مخصصة للغة Javascript وتقوم بترجمة أو تحويل الشفرة المختصرة إلى شفرة Javascript وتساعد المطور على كتابة شفرات أقل والإعتماد على الأداة في تجنب الأخطاء التي يمكن أن تقع فيها لو بدأت الكتابة بلغة Javascript بدون مساعدة أي مكتبة أخرى وتعتمد على الإختصارات في كتابة العديد من أجزاء لغة Javascript مثل إختصارات معينة في سطر واحد لكتابة الدوال، الكائنات والمصفوفات وغيرها .. يمكنك قراءة معلومات أخرى عن CoffeeScript في موسوعة ويكيبيديا.