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

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

آخرین نسخه 1.3.0

نمونه‌ای از کدنویسی با LESS:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

تنها کافیست فایل less.js را به صفحه اضافه کنید:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

متغیرها

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

  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

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);
}
/* 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;
}

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

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

// LESS

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

/* 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;
}

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

آیا وضعیت برخی از اجزا صفحه با اجزای دیگر در ارتباط و وابستگیست؟ با 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%);
}

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

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

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

<link rel="stylesheet/less" type="text/css" href="styles.less">

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

<script src="less.js" type="text/javascript"></script>

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

حالت نظارتی Watch

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

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

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

نحوه‌ی نصب

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

$ npm install less

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

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

var less = require('less');

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

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

.class {
  width: 2;
}

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

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

پیکربندی

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

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 فشرده‌سازی خروجی
});

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

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

$ lessc styles.less

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

$ lessc styles.less > styles.css

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

ساختار زبان

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

متغیرها

وظیفه ی متغیرها کاملا مشخص است:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

خروجی:

#header { color: #6c94be; }

همچنین امکان تعریف یک متغیر براساس نام یک متغیر دیگر مطابق زیر وجود دارد:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

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

content: "I am fnord.";

لطفا دقت فرمایید که متغیرها در LESS در واقع ’ثابت‘ هستند و فقط یکبار میتوان آنها را تعریف و مقداردهی کرد.

Mixinها

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

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

و برای کپی کردن مشخصه های این کلاس در یک سلکتور دیگر کافیست نام کلاس را مانند یک مشخصه، زیر سلکتور مقصد قرار دهیم:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

حال همه ی مشخصه های کلاس bordered. در سلکتورهای menu a# و post a. وجود خواهد داشت:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

استفاده از نام هر class یا id در CSS برای این منظور صحیح است.

مترجم: عبارت سلکتور در این آموزش، ترجمه ی ناقصی است از عبارت rule set که برای فهم بهتر انتخاب گردیده است.

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

LESS قابلیت جدیدی به سلکتورهای CSS اضافه کرده است تا بتوان پارامتر به آن وارد کرد تا براساس پارامتر، مقادیرِ مشخصه های آن را تغییر داد. نمونه:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

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

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

همچنین میتوان برای پارامترها، مقدار اولیه و پیشفرض تعیین کرد:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

و در این حالت فراخوانی به این ترتیب خواهد بود:

#header {
  .border-radius;
}

که کد بالا، براساس تعریف، مقدار ۵ پیکسل به مشخصه های border-radius خواهد داد.

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

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

همه ی آنچه از کد بالا به خروجی فرستاده می شود:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

و چنانچه بجای Mixin پارامتری در نمونه های بالا از Mixin معمولی استفاده کنیم:

.wrap {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

خروجی حاوی یک کلاس CSS نیز هست که میتواند با کلاسهای همنام دیگر اختلاط ایجاد کند:

.wrap {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

متغیر خاص با نام arguments@

داخل Mixin، متغیر arguments@ دارای معنای خاصی است. این متغیر حاوی مقدار همه ی پارامترهای Mixin است. این مورد برای زمانی مناسب است که مقادیر چندگانه ی مشخصه ها را توسط چند پارامتر کنترل کنیم:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

نتیجه:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

بکارگیری الگوها و گاردها

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

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

اینجا ما در نظر داریم براساس مقدار متغیر switch@ در رفتار mixin. تغییر داشته باشیم. برای این منظور، mixin. را مطابق زیر تعریف می کنیم:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

حال چنانچه این کد را اجرا کنیم:

@switch: light;

.class {
  .mixin(@switch, #888);
}

نتیجه به این شکل خواهد بود:

.class {
  color: #a2a2a2;
  display: block;
}

که در نهایت رنگی که به mixin. داده می شود روشنتر خواهد شد. چنانچه مقدار متغیر switch@ برابر باdark باشد رنگ ورودی نیز تیره تر خواهد بود.

Mixin این مثال سه بار تعریف شده و به هنگام اجرا، پروسه ی زیر اتفاق خواهد افتاد:

  • در تعریف Mixin اول، پارامتر اول باید برابر با مقدار dark باشد ولی این مقدار داده نشده پس این تعریف اجرا نخواهد شد.
  • در تعریف Mixin دوم، پارامتر اول باید برابر با مقدار light باشد و در مثال همین مقدار به آن داده شده است پس تعریف دوم اجرا می شود.
  • در تعریف Mixin سوم، نیز پارامتر اول هر مقداری میتواند باشد پس همیشه اجرا خواهد شد.

تنها Mixinهایی اجرا می گردد که پارامترهای داده شده به آن با تعریف مطابقت داشته باشد. متغیرها میتوانند حاوی هر مقداری باشند ولی عباراتی که متغیر نیستند حاوی نام خود هستند.
مانند عبارات dark و light که متغیر نیستند و فقط به ترتیب حاوی مقادیر dark و light هستند.

همچنین میتوانیم براساس تعداد پارامتر نیز داشته باشیم:

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

در اینجا اگر mixin. با یک پارامتر فراخوانی گردد، تعریف اول اجرا میشود و اگر با دو پارامتر فراخوانی شود تعریف دوم استفاده خواهد شد.

گاردها

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

برای نزدیک ماندن به روشهای استاندارد CSS، ابزار LESS قابلیت اجرای Mixinهای خاصی را بجای دستور if/else ساده ایجاد کرده است.
مشابه شرطهای media@ در CSS.

با یک مثال شروع میکنیم:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

کلمه ‌ی کلیدی when یک گارد را ایجاد کرده است که با اجرای کد زیر:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

و این نتیجه ‌ای است که خواهیم گرفت:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

لیست کامل عملگرهای معتبر در گاردها عبارت است از: > >= = =< <. به اضافه ی کلمه ‌ی کلیدی true برای چک کردن وجود یک مقدار و یا تعیین صحت یک شرط. در این حالت دو خط زیر یکسان هستند:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

هر مقداری که با کلمه ‌ی کلیدی true مطابقت نکند، نامعتبر یا false است.

.class {
  .truth(40); // با هیچ یک از تعاریف بالا اجرا نخواهد شد
}

گاردها میتوانند توسط کاما (,) از هم جدا شوند. در این حالت مانند OR در شرط عمل کرده و اگر هر کدام از شرطها صحیح یا true باشند، گارد معتبر در نظر گرفته خواهد شد:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

به یاد داشته باشید که شما در گاردها میتوانید پارامترهای Mixin و یا مقادیر دیگر را بررسی نمایید:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

در آخر، اگر میخواهید نوع یک مقدار را مورد بررسی قرار دهید میتوانید از توابع *is استفاده کنید:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

در زیر توابع ساده‌ی بررسی نوع داده‌ها قابل مشاهده است:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

همچنین میتوانید واحد اندازی‌گیری یک مقدار را علاوه بر نوع عددی آن، تشخیص دهید:

  • ispixel
  • ispercentage
  • isem

شایان ذکر است که در گاردها عبارت and نیز قابل استفاده است که دقیقا مشابه AND در برنامه نویسی عمل کرده و فقط زمانی گارد را معتبر می سازد که همه ی شرطها صحیح یا true باشند:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

و کلمه ی کلیدی not به عنوان عملگر ناصحیح یا false:

.mixin (@b) when not (@b > 0) { ... }

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

LESS به شما امکان میدهد تا برای سلکتورهای سلسله مراتبی، بجای تکرار از نگارش تو در تو استفاده نمایید. برای نمونه، کد CSS زیر را در نظر بگیرید:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

در LESS کد بالا را میتوان مشابه زیر نوشت:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

و یا به این ترتیب:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

این روش بسیار کوتاهتر از روش استاندارد است و ساختار DOM را بخوبی نشان میدهد که درک کدها را بسیار ساده می سازد.

کاراکتر & در این نگارش تو در تو، اشاره به سلکتور بالا دستی دارد. یعنی سلکتوری که در مرحله ی پیشین مراحل تو در تو تعریف شده است. این قابلیت برای pseudo-classها مانند hover: و focus: بسیار پراهمیت است.

برای نمونه:

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

خروجی:

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

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

همه ی اعداد، رنگها و متغیرها قابل استفاده در محاسبات هستند. در زیر نمونه هایی آورده شده است:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS دقیقا همانطور که انتظار میرود واحدها را به هم تبدیل میکند تا نتیجه صحیح به دست آید. این کار با بکار بردن واحد در محاسبات انجام میشود:

@var: 1px + 5;

LESS واحد بکار برده شده را به عنوان واحد نهایی در نظر میگیرد. در نمونه ی بالا، نتیجه 6px خواهد شد.

همچنین پرانتز نیز در محاسبات قابل استفاده است.
محاسبات داخل پرانتز قبل از سایر محاسبات اجرا خواهند شد. ترتیب اجرای پرانتزها از تویی ترین پرانتز موجود تا بیرونی ترین آن و در مواجهه با پرانتزهای هم مرتبه (که داخل هم نیستند) از چپ به راست است.

width: (@var + 5) * 2;

پرانتزها در مقادیر ترکیبی اجباری هستند:

border: (@width * 2) solid black;

توابع کار با رنگها

LESS توابع متنوعی برای کار با رنگها و تبدیل آنها دارد. رنگها برای تبدیل ابتدا به نوع HSL در می آیند:

lighten(@color, 10%);     // را برمیگرداند @color رنگی به میزان ۱۰٪ *روشنتر* از
darken(@color, 10%);      // را برمیگرداند @color رنگی به میزان ۱۰٪ *تیره‌تر* از

saturate(@color, 10%);    // را برمیگرداند @color بیشتر* از* (saturate) رنگی با ۱۰٪ اشباع
desaturate(@color, 10%);  // را برمیگرداند @color کمتر* از* (saturate) رنگی با ۱۰٪ اشباع

fadein(@color, 10%);      // را برمیگرداند @color رنگی با ۱۰٪ شفافیت *کمتر* از
fadeout(@color, 10%);     // را برمیگرداند @color رنگی با ۱۰٪ شفافیت *بیشتر* از
fade(@color, 50%);        // که به میزان ۵۰٪ شفافتر شده را برمیگرداند @color رنگی معادل رنگ

spin(@color, 10);         // را برمیگرداند @color بیشتر از رنگ hue رنگی با ۱۰ درجه
spin(@color, -10);        // را برمیگرداند @color کمتر از رنگ hue رنگی با ۱۰ درجه

mix(@color1, @color2);    // را برمیگرداند @color2 و @color1 رنگی از ترکیب رنگهای

بکارگیری این توابع به سادگی زیر است:

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

همچنین میتوانید مقادیر رنگها را در فرمتهای متفاوت بدست آورید:

hue(@color);        // را برمیگرداند @color رنگ `hue` مقدار
saturation(@color); // را برمیگرداند @color رنگ `saturation` مقدار
lightness(@color);  // را برمیگرداند @color رنگ `lighness` مقدار
alpha(@color);      // را برمیگرداند @color رنگ `alpha` مقدار

این توابع برای ایجاد یک رنگ بر پایه ‌ی یک رنگ دیگر بسیار مفید هستند. برای نمونه:

@new: hsl(hue(@old), 45%, 90%);

متغیر new@ حاوی رنگی با hue رنگ old@ و saturation و lightness مشخص شده است.

توابع محاسبات ریاضی

LESS حاوی تعدادی تابع ریاضی برای کار با مقادیر عددی است:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

توسط تابع percentage میتوانید یک مقدار را به درصد تبدیل کنید:

percentage(0.5); // returns `50%`

Namespaceها

گاهی نیاز داریم که تعدادی متغیر یا Mixin را در جهت دسته بندی و مرتب سازی یا پنهان سازی تعریف کنیم.
بعد از این کار میتوانیم به هر بخشی از محتوای داخل Namespace دسترسی داشته باشیم.
در اینجا مقادیری داخل Namespace با نام bundle# قرار گرفته میتواند برای استفاده‌های مجدد و کنترل استفاده شود.

#bundle {
  @color: red;
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab {
    margin: 10px;
  }
  .citation { ... }
}

حالا میتوانیم به مقادیر Namespace دسترسی داشته باشیم:

#header a {
  color: #bundle[@color];
  #bundle > .button;
  margin: #bundle > .tab['margin'];
}

و خروجی:

#header a {
  color: red;
  display: block;
  border: 1px solid black;
  background-color: grey;
  margin: 10px;
}
#header a:hover { background-color: white }

مترجم: در آخرین نسخه (1.3.0)، قابلیت استفاده از متغیرها و مشخصه های داخل Namespace با خطا روبرو می شود! یعنی در مثال بالا، خطوط اول و سوم نامعتبر است.

محدوده‌ی دسترسی

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

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

در نمونه ی بالا، LESS برای یافتن مقدار متغیر var@ در header#، ابتدا داخل اولین محدوده یعنی خود header# را جستجو میکند. این متغیر در این محدوده تعریف نشده و به سراغ محدوده‌ی بالادستی آن یعنی page# میرود. متغیر در این محدوده تعریف شده و مقدار آن white است و از همان استفاده می شود.
در سلکتور بعدی یعنی footer#، چون داخل محدوده متغیر تعریف نشده، یک دسته بالاتر یعنی سطح سراسری CSS جستجو میشود و مقدار red یافت شده و استفاده میگردد.

عبارات توضیحی

عبارات توضیحیِ استاندارد CSS در LESS نیز معتبر هستند و عینا به خروجی منتقل میگردند:

/* Hello, I'm a CSS-style comment */
.class { color: black }

عبارات توضیحی یک خطی نیز در LESS قابل استفاده است.
در این روش دو کاراکتر Slash (بدون فاصله) در اول خط قرار میگیرد و کل آن خط را توضیحی و بی اثر میکند (فقط همان خط).
عبارات توضیحی یک خطی فقط در سورس LESS قابل مشاهده هستند و کامپایلر LESS آن را از خروجی حذف مینماید. مثال:

// Hi, I'm a silent comment, I won't show up in your CSS
/* Hello, I'm a CSS-style comment */
.class { color: white }

و خروجی CSS:

/* Hello, I'm a CSS-style comment */
.class { color: white }

وارد سازی فایل ها

شما قادرید تا فایلهای less. را به همراه تمامی متغیرها و Mixinهای داخلشان، به شیوه‌نامه ی اصلی وارد نمایید. پسوند less. اختیاری است یعنی هر دو خط زیر معتبر هستند:

@import "lib.less";
@import "lib";

اگر میخواهید یک فایل CSS را وارد نمایید و مایلید که محتویات این فایل توسط LESS کامپایل نگردد (عیننا به خروجی اضافه شود)، کافیست از پسوند css. استفاده کنید:

@import "lib.css";

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

رشته ها

استفاده از مقادیر متغیرها داخل رشته ها مانند زبانهای ruby یا PHP است یعنی برای استفاده از مقدار متغیری با نام name داخل یک رشته، باید از {name}@ استفاده شود. مثال:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

مهار و نادیده گرفتن داده‌ها

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

برای این کار، مقادیر را بصورت رشته درمیاورم (داخل دو علامت double-quotation) و کاراکتر ~ را ابتدای آن قرار میدهیم. برای نمونه:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

این مقدار، نادیده گرفته شده نامیده میشود و خروجی آن به شکل زیر خواهد بود:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

در نمونه ی بالا اگر عبارت مهار نمیشد، کامپایلر تلاش میکرد تا مقدار را از بین توابع و Mixinها پیدا کند ولی با مهارسازی، کامپایلر بدون توجه با محتوای داخل رشته، آن را عینا به خروجی منتقل می نماید.

اجرای جاوااسکریپت

دستورات جاوااسکریپت را میتوان در فایلهای less. اجرا کرد. LESS این دستورات را اجرا کرده و مقدار بازگشتی آنها را در خروجی قرار میدهد. برای این منظور، باید دستورات جاوااسکریپت داخل دو کاراکتر ` یا back-tick قرار گیرند:

@var: `"hello".toUpperCase() + '!'`;

که خروجی به شکل زیر در می آید:

@var: "HELLO!";

دقت نمایید که کاراکتر ` با کوتیشن (') متفاوت است!

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

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

خروجی:

@var: HELLO!;

همچنین دسترسی به محیط جاوااسکریپت هم میسر است:

@height: `document.body.clientHeight`;

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

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

ابزارهای سودمند

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

  • SimpLess: نرم‌افزاری متن باز و رایگان برای محیطهای Linux ،Mac OS X و Windows.
  • Less.app: اپلیکیشنی رایگان اختصاصی برای Mac OS X.

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

ترجمان‌های دیگر

درباره

LESS توسط Alexis Sellier که بیشتر با مجموعه ی cloudhead شناخته می گردد، طراحی شده است.

همچنین راه اندازی این سایت و ترجمه ی مستندات LESS توسط امیرحسین حجتی پور با منظور توسعه ‌ی دانش آزاد صورت گرفته است.

powered by LESS

Copyright © Alexis Sellier 2010-2012 & Translation © Amir Hossein Hodjati Pour 2012

Fork me on GitHub