لس (زبان برنامه‌نویسی)

Less اجازه می‌دهد که متغیر تعریف شود. متغیرها در Less با یک علامت (@) تعریف می‌شوند. متغیر با یک علامت دونقطه (:) مقداردهی می‌شود.

در حین ترجمه، مقادیر متغیرها به فایل خروجی CSS وارد می‌شوند.

@pale-green-color: #4D926F;
#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

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

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

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

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

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

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

Less اجازهٔ تعریف عملیات‌ها و توابع را می‌دهد. عملیات‌ها اجازهٔ جمع، تفریق، تقسیم و ضرب مقادیر خصوصیت‌ها و رنگ‌ها را می‌دهد که می‌توانند برای ایجاد روابط پیچیده بین خصوصیت‌ها استفاده شوند. توابع، به صورت یک-به-یک با کد جاوااسکریپت نگاشت می‌شوند که اجازهٔ دستکاری متغیرها را می‌دهد.

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

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

Sass

هم Sass و هم Less هر دو پیش‌پردازندهٔ CSS هستند که اجازه می‌دهند کد CSS به جای قواعد استاتیک در یک ساختار برنامه‌نویسی نوشته شود.

Less الهام‌گرفته از Sass است. Sass به منظور ساده‌سازی و توسعه دادن CSS طراحی شده‌است، به طوری که چیزهایی ماند آکولاد از سینتکس حذف شده‌است. Less طراحی شده‌است تا نزدیکی به CSS ممکن باشد، و یک نتیجهٔ موجود CSS به صورت یک کد Less معتبر باشد.

نسخهٔ جدیدتر Sass نیز با سینتکس CSS-like به نام SCSS (Sassy CSS) معرفی شده‌است.

برای مقایسهٔ بیشتر سینتکس‌ها لینک زیر را ببینید: https://gist.github.com/674726.

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

• Sass (stylesheet language)
• Stylus (stylesheet language)

• وبگاه رسمی
• منبع گیت Less
• LESS Hat mixins library
• Sai the mixins extension and CSS authoring framework for LESS & SASS/SCSS (Git)

}