محتویات

۱ مقدمه
۲ LESS چیست ؟
۳ مفاهیم پایه
۴ روش استفاده در سمت کاربر
- ۴.۱ حالت نظارتی Watch
۵ روش استفاده در سمت سرور
۶ چگونه از LESS استفاده کنیم ؟
- ۶.۱ استفاده از فایل جاوا اسکریپت LESS
- ۶.۲ کامپایل کردن فایل LESS
۷ استفاده از قدرت LESS
۸ عملگر ها
۹ مدیریت رنگ
۱۰ Nesting
۱۱ Mixins
۱۲ Mixinهای پارامتری
۱۳ فضاهای نامی
۱۴ درون یابی رشته‌ای
۱۵ صرف نظر کردن
۱۶ درون ریزی
۱۷ توضیحات
۱۸ مشکلات LESS چیست ؟
۱۹ نتیجه گیری

مقدمه

همانطور که می‌دانید CSS زبانی‌ است که از آن به منظور اعمال فرمت، سبک نمایش، و نحوه ارائه مستند‌های نوشته‌ شده به زبان‌های نشانه‌گذاری استفاده به عمل می‌آید. بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحه وب DHTML و XHTML است ولی آن را می‌توان بر هر نوع مستند XML از جمله SVG و XUL اعمال کرد.

این زبان محدودیت‌هایی نیز دارد که با پویا کردن آن می‌تواند مفیدتر واقع شود.

برای مثال اگر بخواهیم کد رنگی را استفاده نماییم خیلی بهتر است تا بجای تکرار این کد رنگ آنرا در یک متغیر ذخیره کنیم و از آن متغیر استفاده نماییم.

بدین ترتیب منطقی‌تر است که برخی از دستورات منطقی و برنامه نویسی داخل CSS را با ابزاری قدرتمندتر با استفاده از LESS انجام دهیم.

LESS چیست ؟

LESS توسط روش‌هایی مانند متغیرها، حسابگرها، mixinها و توابع، قابلیت‌های CSS را توسعه داده و آنرا پویا ساخته است.

LESS در هر دو محیط سمت کاربر (مرورگرهای وب مانند گوگل کروم، فایرفاکس، سافاری) و سمت سرور توسط Node.js و Rhino قابل اجــــرا و بهره‌ گیری می‌باشد.

به نوعی می‌توانیم به آن زبان پویای شیوه نامه‌ها نیز اتلاق کنیم.

مفاهیم پایه

متغیرها

متغیرها این امکان را فراهم می‌کنند تا مقادیری که چندین بار در شیوه‌نامه استفاده شده را در یک متغیر ذخیره کرده و از آن در مکان‌های مختلف شیوه‌نامه استفاده نماییم و در نهایت، برای تغییر مقدار آن، تنها کافیست فقط یک خط را ویرایش کنیم:

<source lang="php " > // LESS

@color: #4D926F;

header {

 color: @color;

} h2 {

 color: @color;

}

</source>

/* Compiled CSS */

header {

 color: #4D926F;

} h2 {

 color: #4D926F;

}

</source>

Mixinها

Mixinها مشابه متغیرها عمل می‌کنند با این تفاوت که بجای نگهداری یک مقدار ساده، قادر به ذخیره‌ی تمامی مشخصه‌های یک class یا id هستند.

کافیست نام یک کلاس یا id را به عنوان یک مشخصه‌ی CSS استفاده کنیم تا LESS به آن مراجعه کرده و تمامی مشخصه‌های آن را به محل جدید اضافه نماید.

این مورد توسط نمونه‌ی زیر به خوبی قابل درک است. همچنین Mixinها امکان دریافت پارامتر را نیز دارا می باشند.

// LESS

.rounded-corners (@radius: 5px) {

 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;

}

header {

 .rounded-corners;

}

footer {

 .rounded-corners(10px);

}

</source>

/* Compiled CSS */

header {

 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;

}

footer {

 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;

}

</source>

روش‌های استفاده‌ی تو در تو

با قواعد انتخابگرهای تو در توی LESS دیگر نیازی به استفاده از نام‌های بلند برای مشخص کردن توالی و روابط نداریم. با قرار دادن تو در توی کدها، هم با خوانایی و کوتاهی قابل ملاحظه‌ای در کدها روبرو خواهیم بود و هم این روابط را همچنان در CSS خواهیم داشت.

// LESS

header {

 h1 {
   font-size: 26px;
   font-weight: bold;
 }
 p { font-size: 12px;
   a { text-decoration: none;
     &:hover { border-width: 1px }
   }
 }

}

</source>

/* Compiled CSS */

header h1 {

 font-size: 26px;
 font-weight: bold;

}

header p {

 font-size: 12px;

}

header p a {

 text-decoration: none;

}

header p a:hover {

 border-width: 1px;

}

</source>

توابع و عملگرهای محاسباتی

آیا وضعیت برخی از اجزا صفحه با اجزای دیگر در ارتباط و وابستگیست؟

با LESS می‌توانید از چهار عمل اصلی ریاضی یعنی جمع، ضرب، تقسیم و تفریق برای مقادیر عددی و رنگها استفاده کنید که این قدرت ویژه‌ای در خلق روابط پیچیده و قابل حل به شما خواهد داد. توابع نیز در واقع همان توابع قابل دسترس جاوا اسکریپت هستند که می‌توانند روابط گسترده‌تری را شامل شوند. به این معنا که شما قادرید توابع جاوا اسکریپت تعریف کرده و در LESS آنها را به سادگی فراخوانی کنید تا مقادیر خاص‌تری را در CSS قرار دهند.

// LESS

@the-border: 1px; @base-color: #111; @red: #842210;

header {

 color: @base-color * 3;
 border-left: @the-border;
 border-right: @the-border * 2;

}

footer {

 color: @base-color + #003300;
 border-color: desaturate(@red, 10%);

}

</source>

/* Compiled CSS */

header {

 color: #333;
 border-left: 1px;
 border-right: 2px;

}

footer {

 color: #114411;
 border-color: #7d2717;

}

</source>

روش استفاده در سمت کاربر

شیوه‌نامه‌های LESS را در صفحه با مقدار “stylesheet/less” برای مشخصه‌ی rel فراخوانی کنید:

</source>

سپس less.js از طریق لینک‌های موجود در همین صفحه دریافت نمایید و در بخش <head> صفحه، قبل از سایر فایل‌ها فراخوانی کنید. مانند زیر:

</source>

حتما اطمینان حاصل کنید که شیوه‌نامه‌های LESS و توابع اختصاصی برای آن را قبل از این فایل جاوا اسکریپت در صفحه فراخوانی نمایید.

همچنین در نظر داشته باشید که قالب کلی صفحه بعد از پردازش شیوه‌نامه‌ی LESS شکل خواهد گرفت بنابراین توصیه می‌شود این فراخوانی‌ها قبل از سایر فایل‌های جاواسکریپت و CSS و غیره در <head> انجام گیرد.

حالت نظارتی Watch

حالت Watch قابلیتی است که امکان بازخوانی خودکار شیوه‌نامه‌ها را به محض بروزرسانی فراهم می‌کند.

برای استفاده از این قابلیت عبارت ‘watch!#’ را به انتهای URL اضافه کرده و صفحه را بازخوانی نمایید. همچنین اجرای دستور ()less.watch در کنسول مرورگر نیز موجب بازخوانی آنی شیوه‌نامه‌ها توسط LESS خواهد شد.

روش استفاده در سمت سرور

نحوه‌ی نصب

ساده‌ترین راه نصب LESS روی سرور، استفاده از ابزار npm مطابق زیر است:

$ npm install less

</source>

نحوه‌ی بکارگیری

پس از نصب، به روش زیر می‌توانید کامپایلر را اجرا کنید:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {

   console.log(css);

});

</source>

که خروجی زیر را خواهد داشت:

.class {

 width: 2;

}

</source>

روش دستی اجرای کامپایلر و پردازشگر نیز به ترتیب زیر است:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {

   if (err) { return console.error(err) }
   console.log(tree.toCSS());

});

</source>

پیکربندی

مقادیری جهت شخصی سازی کامپایلر مطابق زیر وجود دارد:

var parser = new(less.Parser)({

   paths: ['.', './lib'], // @import نحوه‌ی مشخص کردن مسیر برای دستور
   filename: 'style.less' // تعیین نام فایل جهت بررسی دقیقتر

});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {

   tree.toCSS({ compress: true }); // CSS فشرده‌سازی خروجی

});

</source>

نحوه اجرا توسط Command-line

LESS در سمت سرور به شکل باینری ارائه شده است و می‌توان آن را در Command-line اجرا کرد:

$ lessc styles.less

</source>

که این دستور کدهای CSS کامپایل شده را به خروجی stdout ارسال می‌کند. جهت ذخیره‌ی این خروجی در فایل، کافیست مطابق زیر مسیر فایل را مشخص کنیم:

$ lessc styles.less > styles.css

</source>

برای فشرده‌سازی خروجی می‌توانید پارامتر x- را به دستور اضافه کنید. چنانچه مایل به فشرده‌سازی اختصاصی‌تری هستید، فشرده‌ساز YUI CSS Compressor توسط پارامتر yui-compress-- در دسترس است.

چگونه از LESS استفاده کنیم ؟

دو راه برای استفاده از LESS وجود دارد. می‌توانیم یک فایل LESS ایجاد کنیم و سپس فایل را تبدیل به فایل جاوا اسکریپت نمایید و یا فایل را کامپایل نموده و به صورت فایل CSS استفاده نماییم.

استفاده از فایل جاوا اسکریپت LESS

ابتدا سایت lesscss.org را باز نمایید و آخرین نسخه از فایل جاوا اسکریپت را دانلود نمایید.

سپس فایل دریافتی را به صفحه پیوست نمایید.

</source>

نکته: توجه داشته باشید که فایل less حتما باید قبل از فایل جاوا اسکریپت به صفحه پیوست شده باشد.

بعد از انجام این مراحل می‌توانید فایل‌های CSS موجود را درون فایل با پسوند .less کپی نمایید و یا اینکه کدهای جدید را در این فایل‌ها بنویسید.

عملکرد این فایل دقیقا شبیه به فایل CSS خواهد بود.

کامپایل کردن فایل LESS

عملکرد LESS بدین صورت است که کل کدهای LESS نوشته شده را به کدهای CSS تبدیل می‌کند. که می‌توانیم فایل LESS را تبدیل کرده و از خروجی CSS استفاده نماییم.

برای کامپایل کردن فایل‌های LESS کاربران مک می‌توانند از نرم افزار LESS.app و کاربران ویندوز از WinLess استفاده نمایند.

نرم افزار کوچکی که قادر است فایل های less را به صورت خودکار پیدا کرده و هرگاه فایل‌ها را ذخیره کنید فایل‌ها را با همان نام و با فرمت CSS ذخیره کند. در این روش شما در عین حال که از فایل‌های قدرتمند LESS استفاده می‌کنید می‌توانید فایل های CSS را به صفحه پیوست نمایید.

استفاده از قدرت LESS

متغیرها

همانطور که بیان شد متغیرها این امکان را فراهم می‌کنند تا مقادیری که چندین بار در شیوه‌نامه استفاده شده را در یک متغیر ذخیره کرده و از آن در مکان‌های مختلف شیوه‌نامه استفاده نماییم و در نهایت، برای تغییر مقدار آن، تنها کافیست فقط یک خط را ویرایش کنیم.

به مثال زیر دقت کنید:

@header-font: BYekan; h1, h2, h3, h4 {

   font-family: @header-font;

} .large {

   font-family:@header-font;

}

</source>

در مثال بالا متغیری به نام @header-font تعریف کردیم و مقدار BYekan را به آن نسبت دادیم. از این به بعد هر جایی که خواستیم از BYekan استفاده کنیم می‌توانیم از این متغیر استفاده کنیم. حالا اگر بخوایم فونت را بهBnazanin تغییر دهیم لازم نیست که کل فایل‌ها را ویرایش کنیم و کافیست مقدار متغیر را تغییر دهیم.

یکی از کاربردهای فوق العاده متغیرها تغییر رنگ وبسایت است. پیش از این برای انجام این کار از روشی مشابه زیر استفاده می کردیم:

/*

Colors for my Website 
   #ff9900 - Orange - used for links and highlighted items
   #cccccc - Light Gray - used for borders     
   #333333 - Dark Black - Used for dark backgrounds and heading text color
   #454545 - Mid Black - Used for general text color

/

body {

   background: #333333;        
   color: #454545;

} a {

   color:#ff9900;

} h1, h2, h3, h4, h5, h6 {

   color: #333333;

}

</source>

استفاده از این روش نوشتن رنگ‌ها اشتباه نیست مشکل اینجاست که از قابلیت شیوه نامه استفاده‌ای نکردیم و فقط رنگ‌ها را تعیین نمودیم. حال اگر بخوایم بعد از خط ۲۰۰۰ رنگی را تغییر دهیم و یا در خط ۳۵۴۵ این تغییر رنگ را اعمال کنیم اطمینان حاصل کردن از اینکه رنگ دلخواه را تعیین کرده‌ایم و شیوه نگارش آن را هم درست انجام داده‌ایم به شدت دشوار خواهد بود .

با LESS می‌توانیم تغییرات را به سادگی و بدون اشتباه انجام دهیم. فقط مقدار متغیرها را تغییر خواهیم داد و این متغیرها در کنار هم بوده و ایجاد تغییرات در بسیار ساده خواهد بود.

محدوده متغیرها

محدوده متغیرها به محل‌هایی که آنها در دسترس هستند اشاره دارد. اگر در ابتدای فایل LESS یک متغیر را تعریف کنیم، این متغیر در هر کدی که بعد از آن بنویسیم در دسترس خواهد بود.

همچنین می‌توانیم یک متغیر را داخل کدهای CSS تعریف کنیم. در این حالت متغیر خارج از این کدها در دسترس نخواهد بود.

a {

   @color: #ff9900;
   color:@color;

} button {

   background: @color;

}

</source>

در مثال بالا تا زمانی که خطایی وجود دارد فایل LESS تبدیل نخواهد شد. @color برای استفاده داخل عنصر button تعریف نشده است. اگر یک متغیر خارج از یک عنصر تعریف شود و همان متغیر داخل یک عنصر هم تعریف شود، در صورت استفاده از این متغیر برای سایر عناصر مقدار تعریف شده اصلی استفاده خواهد شد.

مثال را ببینید:

@color: #222222; a {

   @color: #ffffff;
   color:@color;

} button {

   background: @color;

}

</source>

در این مثال لینک دارای رنگ سفید و دکمه دارای رنگ پس زمینه سیاه خواهند بود.

متغیرهای متغیر

اگر شما با برنامه نویسی PHP آشنایی داشته باشید می‌دانید که می‌شود نام یک متغیر را با مقدار یک متغیر دیگر تعریف کرد.

@color-chirstmas_red: #941f1f; @name-of-color: "color-chirstmas_red"; color: @@name-of-color;

</source>

ثابت‌ها در برابر متغیرها

نکته مهمی که باید به آن توجه داشت اینست که بر خلاف مواردی که تا به حال بیان شد، در LESS متغیرها محبوب‌تر از ثابت‌ها هستند. به این دلیل که ثابت‌ها فقط می‌توانند یک بار تعریف شوند ولی متغیرها را به دفعات مکرر با مقادیر مختلف می‌توان تعریف کرد.

عملگر ها

با استفاده از عملگرهای LESS می‌توانیم کنترل دقیقی بر روی عناصر داشته باشیم. عملکرد عملگرها بسیار ساده است به این معنا که شما قادرید توابع جاوا اسکریپت تعریف کرده و در LESS آنها را به سادگی فراخوانی کنید تا مقادیر خاص‌تری را در CSS قرار دهند.

به مثال زیر توجه کنید:

.button{

   @unit: 3px;
   border:@unit solid #ddd;
   padding: @unit * 3;
   margin: @unit * 2;

}

</source>

در مثال بالا یک متغیر به نام @unit با مقدار ۳ پیکسل تعریف کردیم. در ادامه پهنای حاشیه را برابر با مقدار همین متغیر قرار دادیم. مقدار padding سه برابر پهنا و margin دو برابر مقدار پهنا است.

برای ایجاد یک باکس که border آن در جهت عقربه‌های ساعت افزایش می‌یابد می‌توان از این کد ها استفاده کرد:

.box{

   @base_unit: 1px;
   border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3

}

</source>

مدیریت رنگ

یکی از جذاب ترین بخش‌های LESS مدیریت رنگها است. ما می‌توانیم از عملگرها برای ترکیب رنگها استفاده کنیم. همچنین تعدادی تابع مخصوص رنگ نیز موجود است که می‌توان از آنها استفاده کرد.

عملگرهای رنگ

اگر بخواهیم مقدار یک رنگ را تغییر دهیم می‌توانیم یک رنگ را با آن جمع کنیم یا کم کنیم.

@color: #941f1f; button {

   background: #941f1f + #222222;              
   border: #941f1f - #111111;

}

</source>

در این مثال هر عدد از کد هگز رنگ پس زمینه با ۲ جمع می‌شود. نتیجه برابر خواهد بود با B64141″“ که رنگی روشن‌تر از رنگ اصلی هست. برای حاشیه نیز هر مقدار رنگ منهای یک شده که رنگ نهایی برابر با “۸۳۰E0E” خواهد بود.

خیلی از مواقع پیش میاد که ما رنگی روشن تر یا تیره تر از رنگ اصلی نیاز داریم.

@color-button: #d24444; input.submit {

   color:#fff;
   background:@color-button;   
   border:1px solid @color-button - #222;
   padding:5px 12px;

}

</source>

مثال بالا یک دکمه برای ما ایجاد می‌کند که رنگ حاشیه آن از رنگ زمینه اندکی تیره تر است. با استفاده از این روش لازم نیست که رنگ جدایی را برای حاشیه تعیین کنیم و هر رنگی که برای زمینه در نظر بگیریم رنگ حاشیه اندکی تیره تر خواهد بود. فارغ از اینکه رنگ زمینه چه رنگی هست.

قدرت متغیرها خیلی بیشتر از چیزی هست که اینجا بیان شد. اگه بخواهید رنگ وبسایت خود را تغییر دهید و در مثال بالا برای متغیر @color-button مقدار آن را به رنگ سبز تغییر دهیم همان طور که گفته شد رنگ حاشیه هم تغییر خواهد کرد و اندکی تاریک تر از رنگ زمینه خواهد بود.

کار جالب دیگر ساختن gradient هست. معمولا برای اینکار یک نقطه وسط را تعیین می‌کنیم و gradient را از این نقطه تعریف می‌کنیم. نقطه شروع را اندکی روشن تر و نقطه پایان را کمی تیره تر در نظر می‌گیریم. در نتیجه، تغییر رنگ خوبی برای gradient خواهیم داشت.

مثال را ببینید:

@color: #faa51a; .button {

   background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515));
   background: -moz-linear-gradient(top,  @color + #151515,  @color - #151515);

}

</source>

توابع رنگ

هنوز کارهای زیاد هست که می‌توان با رنگها انجام داد. با استفاده از LESS می‌توانیم کارهایی مانند روشن کردن، تیره کردن، سیر تر کردن، خالی تر کردن، آشکار کردن تدریجی، محو کردن تدریجی و چرخیدن را روی رنگها انجام داد.

به مثال‌ها دقت کنید:

@color: #3d82d1; .left_box {

   background:lighten(@color, 20%);

} .right_box {

   background:darken(@color, 20%);

}

</source>

@color: #3d82d1;.left_box {

   background: desaturate(@color, 18%);

} .middle_box {

   background: @color;

} .right_box {

   background: saturate(@color, 18%);

}

</source>

@color: #3d82d1;.left_box {

   background: spin(@color, 25%);

} .middle_box {

   background: @color;

} .right_box {

   background: spin(@color, -25%);

}

</source>

ترکیب توابع

LESS این قابلیت را دارد که می‌توان از توابع داخلی یکدیگر استفاده کرد. بنابراین اگر بخواهیم یک رنگ را هم اشباع کنیم و هم چرخش دهیم کافیست از کد زیر استفاده کنیم:

@color: #c480bd; .class {

   background-color: saturate(spin(@color, 18), 12%);

}

</source>

Nesting

وقتی در حال نوشتن کدهای CSS هستید ممکن است که از استایل‌های آبشاری استفاده کنید.

برای تغییر margin پاراگراف‌های داخل پست‌ها از کد زیر استفاده می‌کنید:

article.post p{

   margin: 0 0 12px 0;

}

</source>

حالا اگر بخوایم لینک‌ها، نقل قول‌ها، سرخط‌ها و بقیه عناصر HTML موجود را هم تغییر استایل دهیم باید برای همه اینها از پیشوند “article.post” استفاده کنیم. نوشتن این نوع کد خسته کننده و خوانایی آن خیلی سخت خواهد بود.

در LESS می‌توانیم همه اینها را تو در تو بنویسیم و در نتیجه نسخه خیلی ساده‌تری از CSS را خواهیم داشت:

<source lang="php"

article.post {

   p{
       margin: 0 0 12px 0;
   }   
   a {
       color: red; 
   }
   a:hover {
       color: blue;
   }   
   img {
       float:left; 
   }

}

</source>

فاصله گذاری‌های در کدها ضروری نیستند اما بهتر است برای خواناتر شدن کدها آنها را به این صورت بنویسیم.

تو در تو نوشتن را می‌توان گسترش داد.

a {

   color:red;

} p {

   margin:0px;

} article {

   a {
       color: green;       
   }    
   p { 
       color: #555;
       a { 
           color:blue; 
       }   
   }

}

</source>

Mixins

همانطور که توضیح داده شد Mixins یک ویژگی در LESS هست که از تکرار کد ها جلوگیری می کند.

به مثال‌های زیر دقت کنید:

اگر بخواهید یک باکس با لبه‌های گرد در گوشه بالا چپ ایجاد کنید ؟

.tab {

   -webkit-border-top-left-radius: 6px;
   -webkit-border-top-right-radius: 6px;       
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px; 
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;

}

</source>

با LESS می‌توانیم همه اینها را با ساخت یک mixin انجام دهیم.

.rounded_top {

   -webkit-border-top-left-radius: 6px;
   -webkit-border-top-right-radius: 6px;
   -moz-border-radius-topleft: 6px; 
   -moz-border-radius-topright: 6px;
   border-top-left-radius: 6px; 
   border-top-right-radius: 6px;

} .tab {

   background: #333;
   color:#fff; 
   .rounded_top;

} .submit {

   .rounded_top;

}

</source>

در مثال بالا یک عنصر به نام .rounded_top تعریف کردیم که گوشه‌های بالایی را گرد کند. حال اگر این عنصر را به عنوان یک mixin برای عنصر دیگر به کار ببرید.

mixinها را نیز می‌توان به صورت تو در تو به کار برد:

.rounded_top {

   -webkit-border-top-left-radius: 6px;
   -webkit-border-top-right-radius: 6px;       
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px;   
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;

} .tab {

   background: #333;   
   color:#fff;
   .rounded_top;

} .submit {

   .tab;       
   background: red;

}

</source>

در این مثال دستوراتی برای submit اعمال می‌شود.

گرد شدن گوشه‌های بالا و رنگ سفید و رنگ زمینه قرمز می‌باشد.

Mixinهای پارامتری

mixinهای پارامتری کمی پیچیده به نظر می‌رسند اما مشکل بزرگی را به صورت خیلی ساده حل می‌کنند. در مثال بالا دیدید که چگونه توانستیم عنصری را تعریف کنیم که گوشه‌های بالای عناصر دیگر را به مقدار ۶ پیکسل گرد کند.

حالا اگر بخواهیم به جای ۶ پیکسل ، ۳ پیکسل گوشه‌ها گرد شوند چطور اینکار باید انجام شود؟

برای همه مقادیر مورد نظر یک عنصر جدید تعریف کنیم ؟!

پاسخ مطمئنا منفی هست !

ما باید از mixinهای پارامتری استفاده کنیم.

mixinهای پارامتری خیلی شبیه به توابع هستند. زیرا می‌توانیم زمان استفاده از آنها یک مقدار برای آن ارسال کنیم.

مثال قبلی را بازنویسی می‌کنیم:

.rounded_top(@radius) {

   -webkit-border-top-left-radius: @radius;
   -webkit-border-top-right-radius: @radius;   
   -moz-border-radius-topleft: @radius;
   -moz-border-radius-topright: @radius;
   border-top-left-radius: @radius;
   border-top-right-radius: @radius;

} .tab {

   background: #333;   
   color:#fff;
   .rounded_top(6px);

} .submit {

   .rounded_top(3px);

}

</source>

در کد بالا عنصر tab دارای گوشه‌های گرد ۶ پیکسلی و عنصر submit دارای گوشه‌های گرد ۳ پیکسلی هستند.

مقادیر پیش فرض

اگر معمولا از یک مقدار مشخص استفاده می‌کنید ولی گاهی لازمست که این مقدار را تغییر دهید می‌توانید از مقادیر پیش فرض برای mixinها استفاده کنید.

.rounded_top(@radius:6px) {

   -webkit-border-top-left-radius: @radius;
   -webkit-border-top-right-radius: @radius;   
   -moz-border-radius-topleft: @radius;
   -moz-border-radius-topright: @radius;
   border-top-left-radius: @radius;
   border-top-right-radius: @radius;

} .tab {

   background: #333;   
   color:#fff;
   .rounded_top;

}

.submit {

   .rounded_top(3px);

}

</source>

پارامترهای چندگانه

ما می‌توانیم از پارامترهای چند گانه برای تعریف mixinهای پیچیده‌تر استفاده کنیم.

.radius(@radius:6px) {

   -webkit-border-radius: @radius;     
   -moz-border-radius: @radius; 
   border-radius: @radius;

} .button(@radius:3px, @background: #e7ba64, @padding: 4px) {

   .radius(@radius);   
   background:@background;
   border: 1px solid @background - #222;       
   padding: @padding;

} .read_more {

   .button(0px);

}

</source>

بر اساس مثال بالا هرگاه یک عنصر با کلاس read_more ایجاد کنیم دارای padding با مقدار ۴ پیکسل، رنگ زمینه با مقدار #e7ba64 و گوشه‌های گرد با مقدار ۰ پیکسل خواهد بود.

استفاده از همه پارامترها داخل یکی

انتخاب دیگری که هنگام استفاده از آرگومان‌ها داریم استفاده هم زمان از آنها هست. در خلاصه نویسی CSS چندین مقدار را پشت سر هم می‌نویسیم.

div {

   border:1px solid #bbb;

}

</source>

برای ساختن یک حاشیه خاکستری می‌توانیم از یک تابع استفاده کنیم که همه عناصر مورد نیاز را بگیرد و این حاشیه را ایجاد کند:

.gray_border(@width: 1px, @type: solid, @color: #bbb){

   border:@arguments;

} div {

   .gray_border(2px, dashed);

}

</source>

@arguments در مثال بالا یک کلمه مخصوص هست. همه پارامترهای موجود را بر اساس چیدمان دریافتی یکی بعد از دیگر به خروجی ارسال می‌کند. در مثال بالا CSS معادل با کد LESS بشرح زیر خواهد بود:

div {

   border:2px dashed #bbb;

}

</source>

mixinهای پارامتری بدون پارامتر

استفاده از mixinها پارامتری بدون استفاده از پارامتری برای آنها هم امکان پذیر است. کاربرد این روش زمانی که ما تمایل نداریم mixinها در کدهای CSS به نمایش در آیند اما قصد داریم که عناصر آنها به عنصری که از آن استفاده کرده اعمال گردد، استفاده می‌کنیم.

.alert {

   background: red;    
   color: white;
   padding:5px 12px;

} .error_message {

   .alert;     
   margin: 0 0 12px 0;

}

</source>

خروجی CSS کدهای بالا:

.alert {

   background: red;
   color: white;       
   padding:5px 12px;

} .error_message {

   background: red;
   color: white;
   padding:5px 12px;
   margin: 0 0 12px 0;

}

</source>

اگر از یک پارامتر خالی استفاده کنیم می‌توانیم کلاس .alert را مخفی کنیم:

.alert() {

   background: red;    
   color: white;
   padding:5px 12px;

} .error_message {

   .alert;     
   margin: 0 0 12px 0;

}

</source>

معادل CSS کد بالا:

.error_message {

   background: red;
   color: white; 
   padding:5px 12px;
   margin: 0 0 12px 0;

}

</source>

این روش در درجه اول برای کاهش حجم فایل CSS مفید هست. اگر کلاس .alert هیچ گاه به صورت مستقیم استفاده نشود دلیلی وجود ندارد که در فایل خروجی نیز وجود داشته باشد.

فضاهای نامی

فضاهای نامی (Namespaces) در زبان‌های برنامه نویسی معمولا برای گروه بندی بسته‌ها یا قابلیت‌ها به صورت با هم به کار می‌روند.

در LESS هم می‌توانیم مشابه این روش را با استفاده از بسته بندی mixinها داشته باشیم.

my_framework {

   p {
       margin: 12px 0;
   }
   a {
       color:blue;
       text-decoration: none;
   }           
   .submit {
       background: red;
       color: white;
       padding:5px 12px; 
   }

}

</source>

هنگامی که کار بر روی وبسایتی با فریمورکی که تهیه کردیم پیاده شود می‌توانیم بسته‌ی #my_framework را اضافه کرده و از آن استفاده کنیم بدون اینکه استایل‌های قبلی یا کدهای جدیدی که قرار است اضافه کنیم به هم بریزد.

.submit_button {

   #my_framework > .submit;

}

</source>

این روش مفیدی برای تغییر استایل و تنظیمات کلی یک طراح نیز هست.

اگر تعداد زیادی قالب را طراحی می‌کنید می‌توانید همه کدها را به صورت بسته بندی داخل فایل LESS پیوست کنید و هرگاه که نیاز داشتید استفاده نمایید.

fw_1 {

   p {
       margin: 12px 0;     
   }  
   a { 
       color:blue;
       text-decoration: none;
   } 
   .submit { 
       background: red;
       color: white;
       padding:5px 12px;
   }

}

fw_2 {

   p {
       margin: 8px 0;      
   }    
   a { 
       color:red;
       text-decoration: underline; 
   }
   .submit {
       background: blue;
       color: white;
       padding:8px 20px;
   }

} .submit_button {

   #fw_2 > .submit;

}

</source>

درون یابی رشته‌ای

درون یابی رشته‌ای شیوه‌ای هست که با استفاده از آن می‌توانیم رشته‌های تکراری را داخل یک متغیر ذخیره کنیم و در هنگام نیاز از آنها استفاده کنیم:

@url: "http://mycompany.com/assets/"; background-image: url("@{url}/sprite.png");

</source>

صرف نظر کردن

گاهی اوقات پیش می‌آید که می‌خواهیم از برخی دستورات و مقادیری استفاده کنیم که در CSS معتبر نیستند (مثلا دستورات مخصوص IE).

قطعا متوجه شده‌اید که gradientها برای کاربران IE به درستی نماش داده نمی‌شود و برای حل این مشکل از دستوری شبیه به کد زیر استفاده می‌کنید:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

</source>

مثال بالا یک کد معتبر CSS نیست در نتیجه LESS قادر به خواندن آن نخواهد بود.

در این گونه موارد می‌توان از این مقدار صرف نظر کرد که باعث می‌شود LESS این قسمت را مورد پردازش قرار ندهد و در واقع کد صرف نظر شده، دقیقا بدون هیچ پردازشی در خروجی ظاهر خواهد شد.

.button {

   background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));   
   background: -moz-linear-gradient(top,  #666666,  @color - #444444);
   filter:  ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";}

</source>

در این مواقع کافیست که مقدار دستور مورد نظر را داخل نقل قول (“”) قرار دهید و قبل از آن از علامت مد (~) استفاده کنید.

درون ریزی

برای درون ریزی فایل کافیست دقیقا شبیه به CSS عمل کنیم.

LESS این قابلیت را دارد که هر دو فایل LESS و CSS را درون ریزی کنید:

@import "reset.min.css"; @import "framework.less"; @import "widgets";

</source>

در مثال بالا خط اول دستورات CSS موجود در فایل reset.min.css را بدون پردازش LESS درون یابی می‌کند.

خط دوم محتوای فایل framework.less را درون ریزی می‌کند و آنها را مانند بقیه کدهای LESS پردازش می‌کند.

خط سوم همانند خط دوم عمل می‌کند. اگر پسوند فایل تعیین نشود به صورت پیش فرض آن را به عنوان فایل less در نظر می گیرد.

توضیحات

توضیحات چند خطی در LESS دقیقا شبیه به CSS هستند.

چیزی که در LESS اضافه شده توضیحات تک خطی هست که شبیه به php برای نوشتن آنها از دو اسلش استفاده می‌کنیم.

/*
   This is my main LESS file.          
   It governs how most of the site looks.

/* body {

   padding:0px; // This resets the body padding

}

</source>

مشکلات LESS چیست ؟

هرچند که LESS فوق العاده است ولی کاستی‌هایی نیز در آن دیده می‌شود که البته خیلی دردسر ساز نیستند.

مشکل اول مربوط به کدهایی است که در نظر گرفته نمی‌شوند. در این کدها به علت اینکه هیچ پردازشی انجام نمی‌شود نمی‌توان از متغیرها استفاده کرد. البته این مشکل بزرگی به حساب نمی‌آید ولی بهتر بود بخشی از این کدها را برای پردازش تعیین کرد فوق العاده می‌شد.

ویژگی دیگری که امیدواریم در آینده عملی شود استفاده از نام گذاری متغیر برای انتخاب گرها و سایر عناصر است. زمانی که به فضاهای نامی نگاه می‌کنیم از کدهایی شبیه به کد زیر برای آنها استفاده کرده‌ایم:

a {

   #my_framework > .link

}

</source>

اگر می‌توانستیم از کد زیر استفاده کنیم بسیار عالی بود:

@framework: "#my_framework"; a {

   @{framework} > .link

}

</source>

این کار باعث می‌شود که بتوانیم همه چارچوب‌های کاری را در یک فایل LESS بیاوریم و سپس با استفاده از تغییر مقدار یک متغیر آنها را به سادگی انتخاب کنیم.

مشکلات و کاستی‌های خیلی کمی در LESS وجود دارد اما در کل LESS فوق العاده قابل استفاده و پایدار هست.

نتیجه گیری

همه‌ی تکنولوژی‌ها و روش‌های جدید در بدو پدیدار شدن خیلی بی‌مورد و بیش از حد مورد استفاده قرار می‌گیرند.

لزومی ندارد که همه کدها به صورت تو در تو نوشته شود، مجبور نیستیم برای هر چیزی یک متغیر تعریف کنیم و یا برای یک حاشیه‌ی ساده یک mixin تعریف کنیم.

باید بدانیم چه موقع از قدرت LESS استفاده کنیم در غیر اینصورت کدهای LESS شما تبدیل به کدهای CSS ناخوانا خواهند شد.

منابع:

http://lesscss.org/

http://lesscss.ir/

http://mihanlearn.com/

ترجمه و ویرایش:

گروه آموزش - تیم جوملا فارسی

هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.

استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.

زبان پویای شیوه‌نامه‌ها LESS

محتویات

مقدمه

LESS چیست ؟

مفاهیم پایه

متغیرها

Mixinها

روش‌های استفاده‌ی تو در تو

توابع و عملگرهای محاسباتی

روش استفاده در سمت کاربر

حالت نظارتی Watch

روش استفاده در سمت سرور

نحوه‌ی نصب

نحوه‌ی بکارگیری

پیکربندی

نحوه اجرا توسط Command-line

چگونه از LESS استفاده کنیم ؟

استفاده از فایل جاوا اسکریپت LESS

کامپایل کردن فایل LESS

استفاده از قدرت LESS

متغیرها

محدوده متغیرها

متغیرهای متغیر

ثابت‌ها در برابر متغیرها

عملگر ها

مدیریت رنگ

عملگرهای رنگ

توابع رنگ

ترکیب توابع

Nesting

Mixins

Mixinهای پارامتری

مقادیر پیش فرض

پارامترهای چندگانه

استفاده از همه پارامترها داخل یکی

mixinهای پارامتری بدون پارامتر

فضاهای نامی

درون یابی رشته‌ای

صرف نظر کردن

درون ریزی

توضیحات

مشکلات LESS چیست ؟

نتیجه گیری

منوی ناوبری

جستجو