آموزش less از صفر تا صد (با نکات و اصول مهم)

مزایای استفاده از less اینفوگرافی

مفاهیم و اصول اولیه مهم

۱. مفاهیم پایه‌ای Less

• Less چیست؟ Less یک زبان پیش‌پردازنده CSS است که به شما امکان می‌دهد کدهای CSS را با استفاده از ویژگی‌های پیشرفته‌تر و ساختارمندتر بنویسید. این کدها سپس به CSS استاندارد کامپایل می‌شوند.

• مزایای Less:

  • استفاده از متغیرها برای مدیریت رنگ‌ها و مقادیر.

  • استفاده از mixinها برای استفاده مجدد از کدها.

  • امکان انجام عملیات ریاضی در CSS.

  • ساختارمندتر و قابل نگهداری‌تر شدن کدهای CSS.

۲. نصب و راه‌اندازی Less

الف. نصب Less

۱. Less را می‌توانید به صورت محلی یا سرور نصب کنید.
۲. برای نصب Less با استفاده از npm (Node Package Manager)، دستور زیر را اجرا کنید:

npm install -g less

ب. کامپایل Less به CSS

۱. یک فایل Less با پسوند .less ایجاد کنید (مثلاً styles.less).
۲. برای کامپایل فایل Less به CSS، دستور زیر را اجرا کنید:

lessc styles.less styles.css

این دستور فایل styles.less را به styles.css کامپایل می‌کند.

۳. ویژگی‌های اصلی Less

الف. متغیرها (Variables)

• تعریف متغیر: می‌توانید مقادیر را در متغیرها ذخیره کنید و در سراسر کد از آن‌ها استفاده کنید.

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

ب. Mixinها

• تعریف Mixin: Mixinها بلوک‌های کدی هستند که می‌توانید آن‌ها را در جاهای مختلف استفاده کنید.

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

ج. توابع (Functions)

• توابع داخلی: Less شامل توابع داخلی برای کار با رنگ‌ها، رشته‌ها و عملیات ریاضی است.

  @base-color: #3498db;
  
  .button {
      background-color: darken(@base-color, 10%);
  }

د. وراثت (Nesting)

• وراثت: می‌توانید قوانین CSS را در داخل یکدیگر قرار دهید تا کدها ساختارمندتر شوند.

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

ه. عملیات ریاضی

• عملیات ریاضی: می‌توانید عملیات ریاضی را در Less انجام دهید.

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

۴. کار با فایل‌های Less

الف. تقسیم کدها به فایل‌های جداگانه

• می‌توانید کدهای Less را در فایل‌های جداگانه تقسیم کنید و آن‌ها را با استفاده از @import وارد کنید.

  @import "variables.less";
  @import "mixins.less";

ب. کامپایل فایل‌های Less

• برای کامپایل چندین فایل Less، می‌توانید از دستور زیر استفاده کنید:

  lessc styles.less styles.css