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 در واقع ’ثابت‘ هستند و فقط یکبار میتوان آنها را تعریف و مقداردهی کرد.

هنگامی که متغیری را تعریف می کنید، آخرین تعریف از حوزه (scope) فعلی به بالا مدنظر قرار میگیرد.

برای مثال :

@var: 0;
.class1 {
  @var: 1;
  .class {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

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

.class1 .class {
  three: 3;
}
.class1 {
  one: 1;
}

متغیرها به صورت دیرهنگام یا lazy بارگزاری می شوند و نیازی به تعریف قبل از استفاده ندارند.

این قطعه کد صحیح است:

lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

این قطعه نیز صحیح است:

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

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

.lazy-eval-scope {
  width: 9%;
}

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 برای این منظور صحیح است.

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

Mixins با چندین پارامتر

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

می توان چندین mixin را با یک نام و تعداد پارامتر مشابه تعریف کرد. در صورتی که از یک mixin با یک پارامتر استفاده کنید مثلا .mixin(green);, سپس ویژگی های تمام mixinهایی که با دقیقا یک پارامتر اصافی هستند استفاده می شوند:

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

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

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

آرگومان های پیشرفته و متغیر @rest

می توانید از ... (سه نقطه) در زمانی که میخواهید mixin را با تعداد نامشخصی از آرگومان ها تعریف کنید استفاده کنید.

.mixin (...) {        //   0-N آرگومان
.mixin () {           // دقیقا 0 آرگومان
.mixin (@a: 1) {      // 0-1 تعداد آرگومان
.mixin (@a: 1; ...) { // 0-N تعداد آرگومان
.mixin (@a; ...) {    // 1-N تعداد آرگومان

بنابراین:

.mixin (@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

مقادیر بازگشتی

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

مثال:

.mixin() { 
  @global: in-mixin;
  @local: in-mixin; 
  @definedOnlyInMixin: in-mixin; 
}

.class {
  @local: localy-defined-value; //متغیر داخلی - محافظت شده
  margin: @global @local @definedOnlyInMixin;
  .mixin(); 
}

@global: outer-scope; // متغیر غیر داخلی- تغییرداده می شود

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

.class {
  margin: in-mixin localy-defined-value in-mixin;
}

بازکردن قفل Mixinها

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

.unlock(@value) { // میکسین خارجی
  .doSomething() { // میکسین داخلی
    declaration: @value;
  }
}

.selector {
  .unlock(5); // unlock doSomething mixin - must be first
  .doSomething(); //nested mixin was copied here and is usable 
}

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

.selector {
  declaration: 5;
}

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

.doSomething(); // syntax error: nested mixin is not available yet
.unlock(5); // too late

کلمه کلیدی important!

از کلمه کلیدی important! بعد از فراخوانی mizin استفاده کنید تا تمامی ویژگی های آن mixin به صورت important! وارد شوند:

مثلا:

.mixin (@a: 0) {
  border: @a;
  boxer: @a;
}
.unimportant {
  .mixin(1); 
}
.important {
  .mixin(2) !important; 
}

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

.unimportant {
  border: 1;
  boxer: 1;
}
.important {
  border: 2 !important;
  boxer: 2 !important;
}

عبارات الگویابی و گارد

گاهی اوقات ممکن است بخواهید رفتار یک mixin را بسته به ورودی آن تغییر دهید. با یک مثال ساده شروع می کنیم:

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

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

حالا فرض کنید میخواهید .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);
}

خروجی CSS زیر به دست می آید:

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

در اینجا رنگ مورد نظر روشن تر می شود، اگر مقدار @switch را برابر dark, تنظیم میکردید رنگ بازگشتی تیره تر می شد.

اتفاقی که در اینجا افتاده این است:

• اولین تعریف mixin منتظر دریافت dark به عنوان آرگومان اول است بنابراین جور (match) نمی شود.
• تعریف دوم جور می شود چون منتظر دریافت این عبارت بوده است : light.
• سومین تعریف نیز اجرا می گردد چون منتظر هر نوع ورودی می باشد و هر نوع ورودی با آن جور می شود.

تنها تعریف mixin هایی که جور شده اند استفاده می شوند. متغیرها با هر مقداری جور می شوند و هر مقداری را به خود میگیرند، اما هر چیزی به جز متغیرها، تنها با مقدار برابر خودش جور می شود.

یک مثال:

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

حالا اگر .mixin را با یک ورودی اجرا کنیم، خروجی مربوط به تعریف اول را دریافت می کنیم، اما اگر آن را با دو آرگومان یا ورودی اجرا کنیم، تعریف دوم را در خروجی دریافت میکنیم که در اینجا fade بین a@ و b@ است.

گاردها

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

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

.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); // با هیچکدام از تعاریف بالا جور نمی شود.
}

گاردها می توانند با ویرگول از هم جدا شوند‘,’–اگر هر یک از گاردها معتبر باشد کل میکسین قابل اجرا می گردد :

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

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

@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 }

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

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

انواع اصلی مقایسه کننده نوع داده ها در زیر آمده است:

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

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

• ispixel
• ispercentage
• isem
• isunit

یادآور می شود، می توانید از کلید واژه and برای افزودن گاردها استفاده کنید:

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

و کلیدواژه not برای منفی کردن گزاره ها:

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

قوانین تودرتو

LESS به شما این امکان را می دهد تا علاوه بر روش آبشاری (یا cascade به معنی اینکه چند سلکتور را در کنار هم بیاورید تا قانون css به چند المان مختلف اعمال شود) می توانید از روش تو در تو ( nesting ) نیز استفاده کنید:

#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 tree شباهت بیشتری دارد.

دفت کنید که حرف & زمانی استفاده می شود که بخواهید یک سلکتور تودرتو به سلکتور والدش اضافه گردد. این به خصوص زمانی کاربرد دارد که از شبه-کلاسهایی مانند :hover و :focus بخواهید استفاده کنید.

برای مثال:

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

این خروجی را می دهد

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

مدیا کوئری های تودرتو

مدیا کوئری ها (Media queries) می توانند به صورت تودرتو نوشته شوند.

.one {
    @media (width: 400px) {
        font-size: 1.2em;
        @media print and color {
            color: blue;
        }
    }
}

نتیجه زیر از کد بالا به دست می آید :

@media (width: 400px) {
  .one {
    font-size: 1.2em;
  }
}
@media (width: 400px) and print and color {
  .one {
    color: blue;
  }
}

کاربردهای پیشرفته از &

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

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

خروجی :

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

همچنین از کاراکتر & در mixinها می توانید استفاده کنید تا به عبارات تودرتویی در خارج از mixin اشاره کنید

گسترش یا Extend

از نسخه 1.4, LESS از گسترش شیوه نامه ها یا Extend پشتیبانی می کند. گسترش به نوعی برعکس mixin است.به جای افزودن ویژگی های کلاس mixin به کلاس فعلی، سلکتور کلاس را به کلاس گسترش یافته اضافه می کند.

برای مثال:

div {
    background-color: #e0e0e0;
}
p:extend(div) {
    color: #101010;
}

خروجی :

div,
p{
    background-color: #e0e0e0;
}
p{
    color: #101010;
}

همانطور که متوجه شدید این کار باعث کاهش قابل توجه ای در حجم خروجی CSS در مقایسه با mixin ها می شود.

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

.parent {
    font-size:12pt;
}
.child {
    &:extend(.parent);
}

به طور پیش فرض، گسترش شامل عناصر تودرتوی از شیوه نامه نمی شود. برای این کار باید حتما کلیدواژه all را به سلکتور گسترش اضافه کنید.

برای مثال:

.a.b.test,
.test.c {
    color: orange;
}
.test {
  &:hover {
    color: green;
    }
}
.replacement :extend(.test) {
}

خروجی:

.a.b.test,
.test.c {
    color: orange;
}
.test:hover {
    color: green;
}

اما این کد:

.a.b.test,
.test.c {
    color: orange;
}
.test {
  &:hover {
    color: green;
    }
}
.replacement :extend(.test all) {
}

این خروجی را می دهد:

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

عملگرها

هر عدد، رنگ یا متغیرها را می توان با عملگرها تغییر داد. عمل محاسباتی باید در داخل پرانتز انجام گردد. در زیر چند مثال آورده شده است :

@base: 5%;
@filler: (@ba href

codeدر LESS میتوانیم مشخصه های زیادی را از یک سلکتور به سلکتورهای دیگر منتقل نماییم. یعنی کلاسی مطابق زیر تعریف کنیمprepxase * 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);

توابع

LESS از توابع گوناگونی پشتیبانی می کند که می توانند رنگ ها را عوض کنند، رشته ها را تغییر دهند و عملیات ریاضی انجام دهند.

نحوه استفاده از آنها کاملا روشن است. در مثال زیر از درصد برای تبدیل 0.5 به 50% استفاده شده است، و باعث می شود تا میزان اشباع (saturation) یک رنگ 5% افزایش پیدا کند و سپس رنگ پس زمینه را 25% روشن تر و 8 درجه می چرخاند:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

فضای نام یا Namespaces

گاهی اوقات، ممکن است بخواهید متغیرها و mixinها را در یک گروه قرار دهید تا مدیریت آنها ساده تر گردد، یا تنها برای اینکه آنها را کپسوله (Encapsulate- *از مباحث برنامه نویسی) کنید، شما می توانید این کار را به راحتی در LESS انجام دهید. مثال زیر را ببینید:

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

اکنون اگر بخواهیم از از کلاس.button در #header a, خود استفاده کنیم می توانیم اینطور عمل کنیم :

#header a {
  color: orange;
  #bundle > .button;
}

می توانید mixin های تودرتو را “unlock” یا "باز" کنید و آنها را درون فضای نام یا namespace بریزید به این ترتیب که mixin اصلی را فراخوانی کنید. از آنجای میکسین های تودرتو مانند مقادیر بازگشتی عمل می کنند، تمام میکسین های تودرتو به داخل فضای نام کپی و از آنجا قابل استفاده هستند :

.unlock(@value) { // outer mixin
  .doSomething() { // تودرتو mixin
    declaration: @value;
  }
}

#namespace() {
  .unlock(5); // unlock doSomething mixin بازکردن میکسین
}

#use-namespace { 
  #namespace > .doSomething(); // اکنون میکسین از طریق فضای نام قابل استفاد هاست
}

خروجی:

#use-namespace {
  declaration: 5;
}

حوزه یا Scope

حوزه ها یا Scope در LESS بسیار مشابه زبان های برنامه نویسی است. متغیرها و میسکین ها ابتدا به صورت محلی یا local جستجو می شوند، در صورتی که پیدا نشوند، کامپایلر در حوزه های بالاتر به دنبال آنها می گردد :

@var: red;

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

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

توضیحات

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

/* یک توضیح به سبک سی اس اس، در خروجی کامپایلر نمایش داده می شود */
.class { color: black }

توضیحات تک خطی نیز در LESS قابل استفاده هستند اما آنها ‘مسکوت’ هستند یعنی کامپایلر آنها را به خروجی نمی فرستد :

// توضیحات به سبک تک خطی، در خروجی نمایش داده نخواهد شد
.class { color: white }

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

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

@import "lib.css";

کامپایلر تنها یک تغییر در ایمپورت فایلهای CSS انجام می دهد، کامپایلر این ایمپورت ها را به ابتدای کدو بعد از تعاریف @charset انتقال می دهد.

مثلا اگر ورودی زیر را داشته باشیم:

h1 { color: green; }
@import "import/official-branding.css?urlParameter=23";

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

@import "import/official-branding.css?urlParameter=23";
h1 { color: green; }

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

علاوه بر این، اگر دستورات وارد شده دارای مدای کوئری (media queries) باشند، محتویات وارد شده در داخل @Media قرار می گیرند.

فایل وارده شده ی“library.less”:

@imported-color: red;
h1 { color: green; }

فایل اصلی، فایل بالا یعنی library.less را وارد می کند:

@import "library.less" screen and (max-width: 400px); // ورود همراه با مدیا کوئری
@import "library.less"; // ورود بدون مدیا کوئردی

.class {
  color: @importedColor; // استفاده از متغیر وارد شده
}

خروجی نهایی :

// متناسب با ورود همراه با مدیا کوئری
@media screen and (max-width: 400px) {
  h1 { color: green; }
}

// ورود بدون مدیا کوئری
h1 { color: green; }
.class {
  // استفاده از متغیر وارد شده
  color: #ff0000;
}

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

مثلا:

pre {
  @import "library.less";
  color: @importedColor;
}

هم متغیر و هم لیست دستورات تعریف شده در “library.less” به داخل سلکتور pre کپی شده اند:

pre {
  color: #ff0000; // variable defined in library.less was available
}
pre h1 { // ruleset defined in library.less was nested into 'pre' ruleset
  color: green;
}

در نسخه v1.3.0 - v1.3.3 دستور @import یک فایل را چندین بار وارد میکرد مگر اینکه توسط دستور @import-once رفتار تغییر میکرد.

در نسخه v1.4.0 دستور @import-once حذف شده است دستور@import به طور پیش فرض تنها یک بار فایل را وارد می کند، این یعنی دو دستور زیر :

   @import “file.less”;
  @import “file.less”;

دستور دوم اجرا نمی گردد.

هر فایلی که با پسوند .css به پایان نرسد به عنوان فایل less شناخته و پردازش می شود. علاوه بر این، اگر فایلی پسوند یا پارامتری نداشته باشد، پسوند“.less” به انتهای آن افزوده می شود:

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

در نسخه v1.4.0 می توانید مفسر را مجبور به استفاده از نوع خاصی از فایل کنید، مثلا :

@import (css) "lib";

خروجی :

@import "lib";

و

@import (less) "lib.css";

فایل lib.css را وارد و آنرا به عنوان فایل less پردازش می کند.

درج رشته

متغیرها می توانند در داخل رشته ها قرار بگیرند، مانند آنچه در Ruby یا PHP رخ می دهد، برای این باید از ساختار@{name} استفاده شود:

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

Escaping

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

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

به این “escaped value”, گفته می شود:

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

مقادیر Escape شده شبیه رشته ها عمل می کنند:

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

دستکاری سلکتور

اگر بخواهید از متغیرهای LESS در داخل سلکتورها استفاده کنید می توانید این کار را با دستور @{selector} انجام دهید :

@name: blocked;
.@{name} {
    color: black;
}

خروجی :

.blocked {
    color: black;
}

مدیا کوئری ها به عنوان متغیر

اگر بخواهید از متغیرهای less در داخل مدیا استفاده کنید، می توانید این کار را با رسم الخط اشاره به متغیر انجام دهیبه صورت @variable. جهت مثال:

@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
  set {
    padding: 3 3 3 3;
  }
}

خروجی :

@media screen, (max-width: 500px) {
  set {
    padding: 3 3 3 3;
  }
}

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

عبارات JavaScript می توانند در less استفاده شوند. توصیه می شود تنها در صورت ضرورت از این قابلیت استفاده کنید .

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

خروجی:

@var: "HELLO!";

می توانید از دستکاری ها و escaping استفاده کنید:

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

خروجی بالا:

@var: HELLO!;

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

@height: `document.body.clientHeight`;

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

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

ایندکس

escape(@string);               // URL encodes a string
e(@string);                    // escape string content
%(@string, values...);         // formats a string

unit(@dimension, [@unit: ""]); // remove or change the unit of a dimension
color(@string);                // parses a string to a color
data-uri([mimetype,] url);       // * inlines a resource and falls back to url()

ceil(@number);                 // rounds up to an integer
floor(@number);                // rounds down to an integer
percentage(@number);           // converts to a %, e.g. 0.5 -> 50%
round(number, [places: 0]);    // rounds a number to a number of places
sqrt(number);                  // * calculates square root of a number
abs(number);                   // * absolute value of a number
sin(number);                   // * sine function
asin(number);                  // * arcsine - inverse of sine function
cos(number);                   // * cosine function
acos(number);                  // * arccosine - inverse of cosine function
tan(number);                   // * tangent function
atan(number);                  // * arctangent - inverse of tangent function
pi();                          // * returns pi
pow(@base, @exponent);     // * first argument raised to the power of the second argument
mod(number, number);       // * first argument modulus second argument

convert(number, units);    // * converts between number types
unit(number, units);       // *changes number units without converting it
color(string);             // converts string or escaped value into color

rgb(@r, @g, @b);                             // converts to a color
rgba(@r, @g, @b, @a);                        // converts to a color
argb(@color);                                // creates a #AARRGGBB
hsl(@hue, @saturation, @lightness);          // creates a color
hsla(@hue, @saturation, @lightness, @alpha); // creates a color
hsv(@hue, @saturation, @value);              // creates a color
hsva(@hue, @saturation, @value, @alpha);     // creates a color

hue(@color);           // returns the `hue` channel of @color in the HSL space
saturation(@color);    // returns the `saturation` channel of @color in the HSL space
lightness(@color);     // returns the 'lightness' channel of @color in the HSL space
hsvhue(@color);        // * returns the `hue` channel of @color in the HSV space
hsvsaturation(@color); // * returns the `saturation` channel of @color in the HSV space
hsvvalue(@color);      // * returns the 'value' channel of @color in the HSV space
red(@color);           // returns the 'red' channel of @color
green(@color);         // returns the 'green' channel of @color
blue(@color);          // returns the 'blue' channel of @color
alpha(@color);         // returns the 'alpha' channel of @color
luma(@color);          // returns the 'luma' value (perceptual brightness) of @color

saturate(@color, 10%);                  // return a color 10% points *more* saturated
desaturate(@color, 10%);                // return a color 10% points *less* saturated
lighten(@color, 10%);                   // return a color 10% points *lighter*
darken(@color, 10%);                    // return a color 10% points *darker*
fadein(@color, 10%);                    // return a color 10% points *less* transparent
fadeout(@color, 10%);                   // return a color 10% points *more* transparent
fade(@color, 50%);                      // return @color with 50% transparency
spin(@color, 10);                       // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
tint(@color, 10%);                      // return a color mixed 10% with white
shade(@color, 10%);                     // return a color mixed 10% with black
greyscale(@color);                      // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // return @darkcolor if @color1 is > 43% luma
                                        // otherwise return @lightcolor, see notes

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

iscolor(@colorOrAnything);              // returns true if passed a color, including keyword colors
isnumber(@numberOrAnything);            // returns true if a number of any unit
isstring(@stringOrAnything);            // returns true if it is passed a string
iskeyword(@keywordOrAnything);          // returns true if it is passed keyword
isurl(@urlOrAnything);                  // returns true if it is a string and a url
ispixel(@pixelOrAnything);              // returns true if it is a number and a px
ispercentage(@percentageOrAnything);    // returns true if it is a number and a %
isem(@emOrAnything);                    // returns true if it is a number and an em
isunit(@numberOrAnything, "rem");       // * returns if a parameter is a number and is in a particular unit

// * These functions are only available in the 1.4.0 beta

توابع رشته

escape

رشته ورودی را بر اساس URL-Encoding کد می کند.

• کاراکترهایی که کد نمی شوند: ,, /, ?, @, &, +, ', ~, ! , $.
• کاراکترهای اصلی که کد می شوند <space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ , =.

پارامترها:

• string: رشته ورودی

نتیجه: رشته escape شده.

مثال:

escape('a=1')

خروجی:

a%3D1

e

مشابه دستور~"value" است.

پارامترها:

• string: رشته ورودی

خروجی: string.

مثال:

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

خروجی:

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

% format

فرمت دهی به سبک C :

پارامترها:

• string: رشته با قالب,
• anything* : مقادیر

خروجی: رشته فرمت بندی شدهstring.

مثال:

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

خروجی:

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

توابع غیره

color

تبدیل رشته به رنگ

پارامترها:

• string: رشته حاوی رنگ

مثال:

color("#aaa");

خروجی:

#aaa

unit

حذف یا تغییر واخد

پارامترها:

• dimension: عددی با واحد یا بدون واخد
• unit: اختیاری: واحد مورد نظر

مثال:

unit(5, px)

خروجی:

5px

مثال:

unit(5em)

خروجی:

5

data-uri

وارد کردن محتوای لینک به درون CSS

پارامترها:

• mimetype: نوع mime. اختیاری.
• url: آدرس فایل.

مثال:

data-uri('../data/image.jpg');

خروجی:

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

خروجی در براوزر:

url('../data/image.jpg');

مثال:

data-uri('image/jpeg;base64', '../data/image.jpg');

خروجی:

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

توابع ریاضی

ceil

سقف کردن عدد (رند کردن به سمت بالا)

پارامترها:

• number: عدد اعشاری.

خروجی: integer

مثال:

ceil(2.4)

خروجی:

3

floor

کف کردن عدد (رند کردن به سمت پایین)

پارامترها:

• number: عدد اعشاری.

خروجی: integer

مثال:

floor(2.6)

خروجی:

2

percentage

تبدیل اعشاری به درصد

پارامترها:

• number:

خروجی: string

مثال:

percentage(0.5)

خروجی:

50%

round

رند کردن عدد

پارامترها:

• number: عدد اعشاری.
• decimalPlaces: اختیاری: تعداد اعشار جهت رند کردن. پیش فرض صفر0.

خروجی: number

مثال:

round(1.67)

خروجی:

2

مثال:

round(1.67, 1)

خروجی:

1.7

sqrt

محاسبه جذر

پارامترها:

• number

خروجی: number

مثال:

sqrt(25cm)

خروجی:

5cm

مثال:

sqrt(18.6%)

خروجی:

4.312771730569565%;

abs

قدرمطلق را بر می گرداند

پارامترها:

• number.

خروجی: number

مثال:

abs(25cm)

خروجی:

25cm

مثال:

abs(-18.6%)

خروجی:

18.6%;

sin

محاسبه سینوس

پارامترها:

• number.

خروجی: number

مثال:

sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian

خروجی:

0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian

asin

محاسبه آرک سینوس

پارامترها:

• number: عدد اعشاری بین یک و منفی یک

خروجی: number

مثال:

asin(-0.8414709848078965)
asin(0) 
asin(2)

خروجی:

-1rad
0rad
NaNrad

cos

کسینوس را محاسبه می کند

پارامترها:

• number

خروجی: number

مثال:

cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian

خروجی:

0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian

acos

آرک کوسینوس را برمیگرداند

پارامترها:

• number: عدد اعشاری بین یک و منفی یک.

خروجی: number

مثال:

acos(0.5403023058681398)
acos(1) 
acos(2)

خروجی:

1rad
0rad
NaNrad

tan

تانژانت را برمیگرداند

پارامترها:

• number

خروجی: number

مثال:

tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian

خروجی:

1.5574077246549023 // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian

atan

آرک تانژانت را محاسبه می کند

پارامترها:

• number.

خروجی: number

مثال:

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places

خروجی:

-1rad
0rad
1.525373rad;

pi

عدد پی را بر می گرداند

پارامترها:

• none

خروجی: number

مثال:

pi()

خروجی:

3.141592653589793

pow

توان را محاسبه می کند

پارامترها:

• number: پایه.
• number: توان.

خروجی: number

مثال:

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)

خروجی:

1cm
0.0016
5
NaN
NaN%

mod

باقیمانده را محاسبه میکند

پارامترها:

• number.
• number.

خروجی: number

مثال:

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);

خروجی:

NaNcm;
5cm
-1%;

convert

اعداد را از نوعی به نوع دیگر تبدیل می کند. آرگومان اول حاوی عدد همراه با واحد و آرگومان دوم واحد تبدیلی است.

Compatible unit groups: * lengths: m, cm, mm, in, pt and pc, * time: s and ms, * angle: rad, deg, grad and turn.

پارامترها:

• number.
• identifier, string یا escaped value: واخد

خروجی: number

مثال:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types

خروجی:

9000ms
140mm
8

Unit

عدد همراه با واحد برگشت می دهد. در این تابع عدد هیچ تغییری نمی کند.

پارامترها:

• number: عدد همراه با واحد.
• identifier یا escaped value: واحد.

خروجی: number

مثال:

unit(9s, ~"ms")
unit(-9, m)

خروجی:

9ms
-9m

Color

رشته را به رنگ تبدیل می کند

پارامترها:

• identifier or escaped value with valid color in hexadecimal or shorthand representation.

خروجی: color

مثال:

color("#445566")
color(~"#123")

خروجی:

#445566
#112233

توابع رنگ

تعریف رنگ

rgb

یک رنگ از ترکیب سه رنگ اصلی ایجاد میکند.

پارامترها:

• red: قرمز : عدد بین 0-255 یا درصد بین0-100%.
• green: سبز: عدد بین 0-255 یا درصد بین0-100%.
• blue: آبی : عدد بین 0-255 یا درصد بین0-100%.

خروجی: color

مثال:

rgb(90, 129, 32)

خروجی:

#5a8120

rgba

مانند rgb اما رنگ محو یا آلفا Alpha نیز به آن اضافه گردیده است

پارامترها:

• red: قرمز : عدد بین 0-255 یا درصد بین0-100%.
• green: سبز: عدد بین 0-255 یا درصد بین0-100%.
• blue: آبی : عدد بین 0-255 یا درصد بین0-100%.
• alpha: آلفا : عدد بین 0-1 یا درصد بین 0-100%.

خروجی: color

مثال:

rgba(90, 129, 32, 0.5)

خروجی:

rgba(90, 129, 32, 0.5)

argb

یک رنگ با فرمت #AARRGGBB ایجاد میکند. توجه کنید فرمت#RRGGBBAA نیست. از آن در اینترنت اکسپلورر و .NET و اندروید استفاده می شود.

پارامترها:

• color: یک شی رنگ.

خروجی: string

مثال:

argb(rgba(90, 23, 148, 0.5));

خروجی:

#805a1794

hsl

ترکیب رنگی از hue, saturation و lightness یا HSL تشکیل می دهد.

پارامترها:

• hue: An integer 0-360 representing degrees.
• saturation: A percentage 0-100% or number 0-1.
• lightness: A percentage 0-100% or number 0-1.

خروجی: color

مثال:

hsl(90, 100%, 50%)

خروجی:

#80ff00

مثال:

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

hsla

مانند HSL است اما دارای کانال اضافی آلفا نیز می باشد.

پارامترها:

• hue: An integer 0-360 representing degrees.
• saturation: A percentage 0-100% or number 0-1.
• lightness: A percentage 0-100% or number 0-1.
• alpha: A percentage 0-100% or number 0-1.

خروجی: color

مثال:

hsl(90, 100%, 50%, 0.5)

خروجی:

rgba(128, 255, 0, 0.5)

hsv

فرمت HSV از ترکیب hue, saturation و value.

پارامترها:

• hue: An integer 0-360 representing degrees.
• saturation: A percentage 0-100% or number 0-1.
• value: A percentage 0-100% or number 0-1.

خروجی: color

مثال:

hsv(90, 100%, 50%)

خروجی:

#408000

hsva

مشابه HSV است اما دارای کانال اضافی آلفا است.

پارامترها:

• hue: An integer 0-360 representing degrees.
• saturation: A percentage 0-100% or number 0-1.
• value: A percentage 0-100% or number 0-1.
• alpha: A percentage 0-100% or number 0-1.

خروجی: color

مثال:

hsva(90, 100%, 50%, 0.5)

خروجی:

rgba(64, 128, 0, 0.5)

اطلاعات کانالهای رنگ

hue

بخش نوع رنگ یا hue را از رنگ استخراج می کند

پارامترها:

• color: یک شی رنگ.

خروجی: integer 0-360

مثال:

hue(hsl(90, 100%, 50%))

خروجی:

90

saturation

بخش اشباع یا saturation یک رنگ را برمیگرداند

پارامترها:

• color: یک شی رنگ.

خروجی: percentage 0-100

مثال:

saturation(hsl(90, 100%, 50%))

خروجی:

100%

lightness

بخش روشنایی یا lightness یک رنگ را برمیگرداند

پارامترها:

• color: یک شی رنگ.

خروجی: percentage 0-100

مثال:

lightness(hsl(90, 100%, 50%))

خروجی:

50%

hsvhue

بخش فام یا hue در فضای رنگ hsv برمیگرداند

پارامترها:

• color: یک شی رنگ.

خروجی: integer 0-360

مثال:

hsvhue(hsv(90, 100%, 50%))

خروجی:

90

hsvsaturation

بخش اشباع یا saturation در فضای رنگ hsv بر میگرداند

پارامترها:

• color: یک شی رنگ.

خروجی: percentage 0-100

مثال:

hsvsaturation(hsv(90, 100%, 50%))

خروجی:

100%

hsvvalue

بخش مقدار یا value را در فضای رنگ hsv بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: percentage 0-100

مثال:

hsvvalue(hsv(90, 100%, 50%))

خروجی:

50%

red

کانال قرمز یک رنگ را بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: integer 0-255

مثال:

red(rgb(10, 20, 30))

خروجی:

10

green

کانال سبز یک رنگ را بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: integer 0-255

مثال:

green(rgb(10, 20, 30))

خروجی:

20

blue

کانال آبی یک رنگ را بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: integer 0-255

مثال:

blue(rgb(10, 20, 30))

خروجی:

30

alpha

کانال محو یا آلفا (یا شفافیت Alpha) از یک رنگ را بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: float 0-1

مثال:

alpha(rgba(10, 20, 30, 0.5))

خروجی:

0.5

luma

میزان روشنایی بر اساس luma را بر می گرداند

پارامترها:

• color: یک شی رنگ.

خروجی: percentage 0-100%

مثال:

luma(rgb(100, 200, 30))

خروجی:

65%

عملگرهای رنگ

عملگرهای رنگ معمولا پارامترهای ورودی را با واحدی دریافت می کنند که قرار است آن را تغییر دهند. همچنین درصدها به صورت مطلق افزایش می یابند، یعنی اگر 10% قرار باشد تا 10% افزایش پیدا کند نتیجه 20% خواهد شد و نه 11%.همچنین مقداری از حداکثر و حداقل خود خارج نمی شوند.

saturate

مقدار اشباع یا saturation را به مقدار مشخص افزایش می دهد

پارامترها:

• color: یک شی رنگ.
• amount: مقدار بین0-100%.

خروجی: color

مثال:

saturate(hsl(90, 90%, 50%), 10%)

خروجی:

#80ff00 // hsl(90, 100%, 50%)

desaturate

اشباع یا saturation را به اندازه مشخصی کاهش می دهد

پارامترها:

• color: یک شی رنگ.
• amount: درصد بین0-100%.

خروجی: color

مثال:

desaturate(hsl(90, 90%, 50%), 10%)

خروجی:

#80e51a // hsl(90, 80%, 50%)

lighten

روشنایی رنگ را به اندازه مشخصی افزایش می دهد

پارامترها:

• color: یک شی رنگ.
• amount: درصدی بین 0-100%.

خروجی: color

مثال:

lighten(hsl(90, 90%, 50%), 10%)

خروجی:

#99f53d // hsl(90, 90%, 60%)

darken

روشنایی رنگ را به اندازه مشخصی کاهش می دهد و تاریک تر می کند

پارامترها:

• color: یک شی رنگ.
• amount: درصدی بین 0-100%.

خروvaluepcolorlightness.ms جی: color

مثال:

darken(hsl(90, 90%, 50%), 10%)

خروجی:

#66c20a // hsl(90, 90%, 40%)

fadein

میزان شفافیت (یا محو بود transparency) رنگی را کاهش می دهد. یعنی میزان کانال آلفا افزایش پیدا می کند پارامترها:

• color: یک شی رنگ.
• amount: درصدی بین 0-100%.

خروجی: color

مثال:

fadein(hsla(90, 90%, 50%, 0.5), 10%)

خروجی:

rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

برعکس fadein عمل می کند و میزان شفافیت را افزایش می دهد، به معنایی دیگر میزان کانال آلفا را کاهش می دهد

پارامترها:

• color: یک شی رنگ.
• amount: درصدی بین 0-100%.

خروجی: color

مثال:

fadeout(hsla(90, 90%, 50%, 0.5), 10%)

خروجی:

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

میزان شفافیت یا کانال آلفا را تنظیم می کند و برابر مقدار مشخصی قرار می دهد.

پارامترها:

• color: یک شی رنگ.
• amount: درصدی بین 0-100%.

خروجی: color

مثال:

fade(hsl(90, 90%, 50%), 10%)

خروجی:

rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

میزان فام یا Hue را با درجه مشخص می چرخاند، این یعنی جنس رنگ تغییر می کند. درجه بر اساس مقدار 360 حساب می شود و در صورتی که درجه کمتر یا بیشتر باشد به صورت اتوماتیک بین صفر تا 360 درجه محاسبه می شود. بنابراین درجه های 360 و 720 دقیقا یک مقدار مساوی می باشند. توجه کنید که رنگ ها به فرمت RGB تبدیل و ارسل می شوند برای همین جنس رنگ برای رنگهای خاکستری از بین می رود (زیرا این رنگ ها به دلیل نداشتن اشباع، فام نیز نخواهند داشت و اساسا برای رنگ خاکستری ترکیب رنگ معنی ندارد). توجه کنید برای اجرای از دستور زیر استفاده نکنید:

@c: saturate(spin(#aaaaaa, 10), 10%);

بلکه از این دستور اضافه کنید:

@c: spin(saturate(#aaaaaa, 10%), 10);

 

پارامترها:

• color: یک شی رنگ.
• angle: درجه چرخش(+ or -).

خروجی: color

مثال:

spin(hsl(10, 90%, 50%), 20)
spin(hsl(10, 90%, 50%), -20)

خروجی:

#f27f0d // hsl(30, 90%, 50%)
#f20d33 // hsl(350, 90%, 50%)

mix

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

پارامترها:

• color1: یک شی رنگ.
• color1: یک شی رنگ.
• weight: اختیاری، درصد بین ترکیب دو رنگ، پیشفرض 50%.

خروجی: color

مثال:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

خروجی:

#800080
rgba(75, 25, 0, 0.75)

greyscale

میزان اشباع یا saturation را از بین می برد .

پارامترها:

• color: یک شی رنگ.

خروجی: color

مثال:

greyscale(hsl(90, 90%, 50%))

خروجی:

#808080 // hsl(90, 0%, 50%)

contrast

با توجه به ورودی ها، رنگی با حداکثر کانتراست را بر می گرداند. به خصوص برای زمانی که خوانایی نسبت به رنگ پس زمینه مهم است استفاده می شود.

پارامترها:

• color: یک شی رنگ برای مقایسه.
• dark: اختیاری - یک رنگ تیره انتخاب شده(پیشفرض مشکی).
• light: اختیاری - یک رنگ روشن انتخاب شده(پیشفرص سفید).
• threshold: اختیاری - درصدی بین0-100% که مشخص می کند که کجا رنگ روشن به تیره تبدیل می شود. (پیشفرض 43%).

خروجی: color

مثال:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

خروجی:

#000000 // black
#ffffff // white
#dddddd
#000000 // black
#ffffff // white

ترکیب رنگ ها

این عملگرها تقریبا شبیه به انواع ترکیب لایه ها در فتوشاپ رفتار می کنند.

multiply

دو رنگ را با هم ضرب یا Multiply می کند. برای دو رنگ، عدد RGB ضربدر هم دیگر و سپس بر 255 تقسیم می شود. نتیجه رنگی تیره تر است.

پارامترها:

• color1: یک شی رنگ .
• color2: یک شی رنگ .

خروجی: color

Examples:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

عمل مخالف multiply را انجام می دهد و نتیحه رنگی روشن تر است.

پارامترها:

• color1: یک شی رنگ .
• color2: یک شی رنگ .

خروجی: color

مثال:

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

ترکیب دو عمل multiply و screen است با این شرط که کانالهای روشن، روشنتر و کانالهای تیره، تیره تر می گردند. توجه کنید شرط ها بر اساس رنگ اول تعیین می شوند.

پارامترها:

• color1: یک شی رنگ .
• color2: یک شی رنگ .

خروجی: color

مثال:

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

شبیه به overlay رفتار می کند اما جلوی این وضعیت را می گیرد که رنگ سیاه خالص نتیجه را سیاه و سفید خالص نتیجه را سفید کند

پارامترها:

• color1: یک شی رنگ.
• color2: یک شی رنگ .

خروجی: color

مثال:

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

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

پارامترها:

• color1: یک شی رنگ .
• color2: یک شی رنگ .

خروجی: color

مثال:

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

رنگ دوم را از اول تفریق می کند. این عمل در سطح RGB انجام می شود و نتیجه رنگی تیره تر خواهد بود.

پارامترها:

• color1: یک شی رنگ که از آن کم می شود.
• color2: یک شی رنگ که از رنگ دیگر کم می کند.

خروجی: color

مثال:

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

شبیه به difference کار می کند اما با کانتراستی پایین تر

پارامترها:

• color1: یک شی رنگ .
• color2: یک شی رنگ .

خروجی: color

مثال:

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

میانگین بین دو رنگ را محاسبه می کند. این عمل در سطح RGB صورت می گیرد.

پارامترها:

• color1: یک شی رنگ.
• color2: یک شی رنگ.

خروجی: color

مثال:

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

عمل بر عکس difference را انجام می دهد. نتیجه رنگی روشن تر خواهد بود.

پارامترها:

• color1: یک شی رنگ
• color2: یک شی رنگ

خروجی: color

مثال:

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);