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

یه روز برنامه‌نویسی به اسم "آلکسیس سیلرز" که از این وضعیت خسته شده بود، ایده‌ای به ذهنش رسید. چرا نشه یه زبانی داشت که CSS رو ساده‌تر و قابل مدیریت‌تر کنه؟ و این‌طوری Less متولد شد. Less یه پیش‌پردازنده CSS هست که به شما اجازه می‌ده کدهای CSS رو به شکلی مدرن‌تر و با قابلیت‌های بیشتر بنویسید.

اگر Less و پیش‌پردازنده‌های CSS نبودند، چی می‌شد؟

حالا یه لحظه تصور کن Less وجود نداشت. باید هنوزم با همون روش‌های قدیمی CSS کار می‌کردیم. هر تغییر کوچکی یه کابوس بزرگ می‌شد. تغییر رنگ برند؟ تغییر دادن سایز فونت؟ همه این‌ها می‌شد یه پروژه بزرگ که کلی وقت و انرژی می‌گرفت. و از همه بدتر، خلاقیت توی طراحی وب هم محدود می‌شد. دیگه خبری از استایل‌های پیچیده و مدرن نبود. دیگه نمی‌تونستیم سایت‌های جذاب و چشم‌نواز داشته باشیم.

Less چیست و چرا باید ازش استفاده کنیم؟

Less که مخفف Leaner Style Sheets هست، یه زبان سبک و کم‌حجم برای پیش‌پردازش CSS هست که با اضافه کردن قابلیت‌هایی مثل متغیرها، توابع و عملیات ریاضی، نوشتن کدهای CSS رو خیلی راحت‌تر و سریع‌تر می‌کنه. با Less می‌تونی استایل‌های پیچیده‌تری بنویسی و کدهای CSS رو به‌صورت مرتب‌تر و قابل مدیریت‌تر سازماندهی کنی.

قابلیت‌های Less

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

استفاده از متغیرها

متغیرها یکی از بهترین قابلیت‌های Less هستن. با استفاده از متغیرها می‌تونی مقادیر ثابتی مثل رنگ‌ها، فونت‌ها و اندازه‌ها رو ذخیره کنی و هر جا که لازم داشتی ازشون استفاده کنی. اینجوری اگه بخوای یه مقدار رو تغییر بدی، فقط کافیه متغیرش رو تغییر بدی و تموم!

مثال:

@primary-color: #3498db;
@font-size: 16px;
body {
  color: @primary-color;
  font-size: @font-size;
}

نستینگ (Nesting)

نستینگ بهت اجازه می‌ده که کدهای CSS رو به صورت سلسله‌مراتبی و مرتب بنویسی. اینطوری کدها خیلی خواناتر و قابل مدیریت‌تر می‌شن. فرض کن داری یه لیست توی یه ناوبری (navigation) استایل می‌دی. با نستینگ می‌تونی خیلی راحت و تمیز این کار رو انجام بدی.

مثال:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: @primary-color;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

میکسین‌ها (Mixins)

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

مثال:

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

عملیات ریاضی

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

مثال:

@base-padding: 10px;
.container {
  padding: @base-padding * 2;
  margin: @base-padding / 2;
}

توابع و توابع درون‌ساخت

Less یه سری توابع درون‌ساخت داره که می‌تونی ازشون برای انجام کارهای مختلف استفاده کنی. مثلاً می‌تونی رنگ‌ها رو روشن‌تر یا تیره‌تر کنی، رشته‌ها رو دستکاری کنی و کلی کارهای دیگه.

مثال:

@primary-color: #3498db;
header {
  background-color: lighten(@primary-color, 20%);
}

ایمپورت‌ها (Imports)

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

مثال:

// variables.less
@primary-color: #3498db;
@font-size: 16px;
// styles.less
@import 'variables.less';
body {
  color: @primary-color;
  font-size: @font-size;
}

اکستند (Extend)

قابلیت اکستند بهت اجازه می‌ده که استایل‌های یه کلاس رو به کلاس‌های دیگه اعمال کنی. اینطوری می‌تونی از تکرار کدها جلوگیری کنی و کدهات رو تمیزتر نگه داری.

مثال:

.button {
  padding: 10px 20px;
  background-color: @primary-color;
  color: #fff;
}
.primary-button {
  &:extend(.button);
  border: none;
}

مزایا و معایب Less

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

مزایای Less

• یادگیری آسان و سینتکس ساده: Less یه سینتکس ساده و قابل فهم داره که اگه با CSS آشنا باشی، یادگیریش برات خیلی سریع و آسونه.
• استفاده از متغیرها: با Less می‌تونی از متغیرها برای ذخیره‌سازی مقادیر ثابت مثل رنگ‌ها، فونت‌ها و اندازه‌ها استفاده کنی. اینجوری خیلی راحت می‌تونی مقادیر رو مدیریت و تغییر بدی.
• نستینگ: نستینگ بهت اجازه می‌ده که کدهای CSS رو به صورت سلسله‌مراتبی و مرتب بنویسی. این ویژگی خوانایی و نگهداری کدها رو خیلی راحت‌تر می‌کنه.
• میکسین‌ها: میکسین‌ها بهت امکان می‌دن که تکه‌های کد قابل استفاده مجدد بسازی و هر جا که نیاز داشتی ازشون استفاده کنی. این قابلیت مثل توابع در زبان‌های برنامه‌نویسیه.
• عملیات ریاضی: Less از عملیات ریاضی پشتیبانی می‌کنه و این بهت اجازه می‌ده که اندازه‌ها و فواصل رو به صورت دینامیک محاسبه کنی.
• توابع درون‌ساخت: Less یه سری توابع درون‌ساخت داره که می‌تونی ازشون برای انجام کارهای مختلف مثل روشن‌تر یا تیره‌تر کردن رنگ‌ها، دستکاری رشته‌ها و کارهای دیگه استفاده کنی.
• ایمپورت‌ها: با Less می‌تونی فایل‌های Less دیگه رو به کد خودت ایمپورت کنی و ازشون استفاده کنی. این قابلیت بهت اجازه می‌ده که کدها رو به صورت ماژولار و قابل مدیریت بنویسی.
• اکستند: قابلیت اکستند بهت اجازه می‌ده که استایل‌های یه کلاس رو به کلاس‌های دیگه اعمال کنی. این ویژگی بهت کمک می‌کنه که از تکرار کدها جلوگیری کنی و کدهات رو تمیزتر نگه داری.

معایب Less

• کمتر قدرتمند نسبت به Sass: پیش‌پردازنده‌ Sass که یکی دیگه از پیش‌پردازنده‌های محبوب CSS هست، قابلیت‌ها و امکانات بیشتری نسبت به Less داره و خیلی از برنامه‌نویسان حرفه‌ای ترجیح می‌دن از Sass استفاده کنن.
• پشتیبانی کمتر در پروژه‌های بزرگ: در پروژه‌های بزرگ و پیچیده، استفاده از Less ممکنه به خاطر محدودیت‌ها و امکانات کمتر نسبت به رقبا، مشکلاتی رو ایجاد کنه.
• نیاز به ابزارهای جانبی: برای استفاده از Less نیاز به ابزارهای جانبی مثل Node.js و کامپایلرهای Less داری که ممکنه برای بعضی کاربران چالش‌برانگیز باشه.
• سرعت کامپایل: سرعت کامپایل Less ممکنه در پروژه‌های بزرگتر نسبت به بعضی پیش‌پردازنده‌های دیگه کندتر باشه.

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

❞ بهترین کد، کدیه که با تلاش کمتر نوشته بشه اما تاثیر بیشتری داشته باشه. Less این امکان رو برای CSS فراهم می‌کنه.❝

مقایسه Less با Sass و Stylus

Less در مقایسه با دیگر پیش‌پردازنده‌های CSS مثل Sass و Stylus ویژگی‌ها و مزایای خاص خودش رو داره. در زیر جدولی از مقایسه این سه ابزار رو می‌بینیم:

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

Sass که مخفف Syntactically Awesome Stylesheets هست، یکی از قدرتمندترین و محبوب‌ترین پیش‌پردازنده‌های CSS محسوب می‌شه. Sass دو سینتکس مختلف داره: SCSS که شبیه به CSS هست و SASS که سینتکس ساده‌تر و کم‌حجم‌تری داره. این ابزار از ویژگی‌های پیشرفته‌ای مثل ارث‌بری، توابع پیشرفته و قابلیت‌های قدرتمند میکسین پشتیبانی می‌کنه. Sass بیشتر توی پروژه‌های بزرگ و پیچیده استفاده می‌شه. جامعه کاربری بزرگ و مستندات عالی اونم باعث می‌شه که یادگیری و حل مشکلات خیلی راحت‌تر باشه.

Stylus یه پیش‌پردازنده قدرتمند و انعطاف‌پذیر هست که بهت اجازه می‌ده از سینتکس خیلی کم‌حجم و ساده تا سینتکس‌های پیچیده‌تر استفاده کنی. این ابزار قابلیت‌های مشابهی با Less و Sass داره، ولی انعطاف‌پذیری بیشتری توی سینتکس و نوشتن کدها فراهم می‌کنه. Stylus بیشتر توی پروژه‌های Node.js و جاوااسکریپت استفاده می‌شه و به خاطر انعطاف بالا، توسعه‌دهندگان حرفه‌ای رو جذب خودش کرده. جامعه کاربری Stylus کوچیک‌تر از Less و Sass هست، ولی با این وجود، یه ابزار قدرتمند و کارآمد برای توسعه‌دهندگان حرفه‌ای به شمار میاد.
انتخاب بین Less، Sass و Stylus بستگی به نیازهای خاص پروژه و تیم شما داره:

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

آموزش نصب Less

خب، حالا که فهمیدیم Less چیه و چه مزایایی داره، وقتشه که یاد بگیریم چطور نصبش کنیم.

مرحله ۱: دانلود و نصب Node.js

برای اجرای مثال‌های Less، نیاز به Node.js داریم. برای دانلود Node.js، به لینک nodejs.org برو و دانلود و نصبش کن.

مرحله 2: نصب Less

حالا Less رو از طریق NPM (Node Package Manager) روی سرور نصب کن. دستور زیر رو توی خط فرمان وارد کن:

npm install -g less

مرحله 3: تأیید نصب Less

بعد از نصب موفقیت‌آمیز Less، خطوط زیر رو توی خط فرمان می‌بینی:

-- less@2.6.1
   +-- errno@0.1.4
   | `-- prr@0.0.0
   +-- graceful-fs@4.1.3
   +-- image-size@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `-- minimist@0.0.8
   +-- promise@7.1.1
   | `-- asap@2.0.3
   +-- request@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `-- lru-cache@4.0.0
   | |   +-- pseudomap@1.0.2
   | |   `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `-- readable-stream@2.0.6
   | |   +-- core-util-is@1.0.2
   | |   +-- inherits@2.0.1
   | |   +-- isarray@1.0.0
   | |   +-- process-nextick-args@1.0.6
   | |   +-- string_decoder@0.10.31
   | |   `-- util-deprecate@1.0.2
   | +-- caseless@0.11.0
   | +-- combined-stream@1.0.5
   | | `-- delayed-stream@1.0.0
   | +-- extend@3.0.0
   | +-- forever-agent@0.6.1
   | +-- form-data@1.0.0-rc4
   | | `-- async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- chalk@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `-- color-convert@1.0.0
   | | | +-- escape-string-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `-- ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- supports-color@2.0.0
   | | +-- commander@2.9.0
   | | | `-- graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- generate-function@2.0.0
   | | | +-- generate-object-property@1.2.0
   | | | | `-- is-property@1.0.2
   | | | +-- jsonpointer@2.0.0
   | | | `-- xtend@4.0.1
   | | `-- pinkie-promise@2.0.0
   | |   `-- pinkie@2.0.4
   | +-- hawk@3.1.3
   | | +-- boom@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `-- sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +-- assert-plus@0.2.0
   | | +-- jsprim@1.2.2
   | | | +-- extsprintf@1.0.2
   | | | +-- json-schema@0.2.2
   | | | `-- verror@1.3.6
   | | `-- sshpk@1.7.4
   | |   +-- asn1@0.2.3
   | |   +-- dashdash@1.13.0
   | |   | `-- assert-plus@1.0.0
   | |   +-- ecc-jsbn@0.1.1
   | |   +-- jodid25519@1.0.2
   | |   +-- jsbn@0.1.0
   | |   `-- tweetnacl@0.14.1
   | +-- is-typedarray@1.0.0
   | +-- isstream@0.1.2
   | +-- json-stringify-safe@5.0.1
   | +-- mime-types@2.1.10
   | | `-- mime-db@1.22.0
   | +-- node-uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +-- tough-cookie@2.2.2
   `-- tunnel-agent@0.4.2
   `-- source-map@0.5.3

حالا که Less رو نصب کردی، بریم یه مثال ساده از Less ببینیم تا متوجه بشی چطوری کار می‌کنه.

فایل HTML (hello.html):

<!doctype html>
<html>
   <head>
      <link rel="stylesheet" href="style.css" type="text/css" />
   </head>
   <body>
      <h1>Welcome to 7Learn</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

فایل Less (style.less)

@primarycolor: #FF7F50;
@color: #800080;
h1 {
   color: @primarycolor;
}
h3 {
   color: @color;
}

برای اجرای Less و تبدیل فایل style.less به style.css، از دستور زیر استفاده کن:

lessc style.less style.css

وقتی این دستور رو اجرا کنی، فایل style.css به صورت خودکار ایجاد می‌شه. هر وقت فایل Less رو تغییر بدی، باید این دستور رو دوباره اجرا کنی تا فایل CSS به‌روزرسانی بشه.

فایل CSS (style.css)

h1 {
  color: #FF7F50;
}
h3 {
  color: #800080;
}

خروجی

حالا فایل HTML رو توی مرورگرت باز کن و خروجی رو ببین. این کد باعث می‌شه که h1 به رنگ نارنجی و h3 به رنگ بنفش دربیاد. به همین راحتی!

نمونه کدهای برنامه‌نویسی با Less

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

مثال اول: استایل‌دهی به دکمه

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

@btn-color: #3498db;
@btn-padding: 10px 20px;
.btn {
  background-color: @btn-color;
  padding: @btn-padding;
  border: none;
  color: #fff;
  text-align: center;
  cursor: pointer;
  &:hover {
    background-color: darken(@btn-color, 10%);
  }
}

در این مثال، از دو متغیر برای رنگ و پدینگ دکمه استفاده کردیم. کلاسی به نام .btn تعریف کردیم که استایل دکمه رو تنظیم می‌کنه. همچنین، با استفاده از &:hover، استایل دکمه در حالت هاور رو تنظیم کردیم که رنگ دکمه کمی تیره‌تر بشه.

مثال دوم: استایل‌دهی به هدر

حالا فرض کن می‌خوایم یه هدر جذاب بسازیم. با استفاده از متغیرها می‌تونیم رنگ و سایز فونت هدر رو تنظیم کنیم.

@header-bg: #2c3e50;
@header-color: #ecf0f1;
header {
  background-color: @header-bg;
  color: @header-color;
  padding: 20px;
  text-align: center;
}

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

مثال سوم: استایل‌دهی به فرم

و حالا بریم سراغ یه مثال کمی پیچیده‌تر. می‌خوایم یه فرم زیبا بسازیم که استایل‌دهی اون با استفاده از Less خیلی راحت‌تر و شیک‌تر بشه.

@form-bg: #ecf0f1;
@form-padding: 20px;
form {
  background-color: @form-bg;
  padding: @form-padding;
  border: 1px solid #bdc3c7;
  input {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
  }
  button {
    background-color: @btn-color;
    color: #fff;
    padding: @btn-padding;
    border: none;
    cursor: pointer;
  }
}

توی این مثال، یه فرم داریم که پس‌زمینه و پدینگش با استفاده از متغیرها تنظیم شده. برای المان‌های داخل فرم مثل input و button هم استایل‌هایی تعیین کردیم. اینطوری فرم ما هم زیبا و هم خوانا می‌شه و استفاده از Less کدنویسی رو خیلی راحت‌تر می‌کنه.

با استفاده از این مثال‌ها می‌تونی ببینی چطوری Less می‌تونه نوشتن و مدیریت کدهای CSS رو آسون‌تر کنه. امیدوارم این مثال‌ها بهت کمک کنن تا بهتر Less رو درک کنی و ازش توی پروژه‌هات استفاده کنی.

سوالات متداول درباره Less

1. Less چیست؟

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

2. چگونه Less را نصب کنم؟ 

با استفاده از npm و دستور npm install -g less می‌تونید Less رو نصب کنید.

3. چه مزایایی داره؟

Less کلی مزایا داره! مثلاً استفاده از متغیرها، توابع، نستینگ و کلی قابلیت دیگه که نوشتن و مدیریت کدهای CSS رو خیلی راحت‌تر و بهتر می‌کنه.

4. آیا Less جایگزین CSS هست؟

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

جمع‌بندی

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