LESS CSS چیست و چگونه از آن استفاده می‌کنید؟

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

اگر یک توسعه‌دهندهٔ باتجربهٔ CSS هستید، از معایب این زبان به خوبی آگاه هستید. هنوز پشتیبانی گسترده‌ای برای ویژگی‌های مدتی‌که درخواست شده‌اند مانند تو در تو شدن (nesting) و mixins ندارد.

Less (Leaner Style Sheets) یک گسترش CSS با ویژگی‌های قدرتمند متعدد است. اگر با CSS آشنا هستید، یادگیری Less آسان است زیرا سینتاکس Less بسیار شبیه به CSS است.

نحوه نصب Less

می‌توانید Less را با JavaScript Package Manager, NPM نصب کنید با اجرای:

npm install less -g

پس از نصب، می‌توانید فایل‌های .less را به .css با استفاده از فرمان lessc کامپایل کنید. برای مثال، فرمان زیر فایل style.less را کامپایل می‌کند و نتایج را در فایل style.css خروجی می‌دهد.

lessc style.less style.css

متغیرها در Less

بر خلاف CSS معمولی که برای تعریف متغیرها از اپراتور “–” استفاده می‌کند، Less متغیرها را با نماد “@” تعریف می‌کند. برای مثال:

@width: 40px;
@height: 80px;

این بلوک کد به سادگی دو متغیر width و height را ایجاد می‌کند که به ترتیب مقادیر 40px و 80px را نگه می‌دارند. معمول است مقادیر پرکاربرد در CSS را در یک متغیر ذخیره کنید. این کار تغییر این مقادیر را آسان‌تر می‌کند زیرا فقط یک منبع کنترل وجود دارد.

در اینجا نحوه استفاده از متغیرها در Less را می‌بینید. یک فایل index.htm ایجاد کنید و کد زیر را اضافه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Using Less CSS</title>
</head>
<body>
    <div>
        Hello from the children of planet Earth!
    </div>
</body>
</html>

بعد، یک فایل style.less ایجاد کنید و موارد زیر را اضافه کنید:

@width: 400px;
@height: 400px;
@vertical-center: center;
@txt-white: white;
@bg-red: rgb(220, 11, 11);
@font-40: 40px;

div {
    width: @width;
    height: @height;
    display: flex;
    color: @txt-white;
    background-color: @bg-red;
    font-size: @font-40;
}

حال می‌توانید فایل .less را به .css با استفاده از فرمان lessc کامپایل کنید:

lessc style.less style.css

CSS کامپایل شده باید به این شکل باشد:

div {
  width: 400px;
  height: 400px;
  display: flex;
  color: white;
  background-color: #dc0b0b;
  font-size: 40px;
}

وقتی مرورگر خود را باز می‌کنید، باید این را ببینید:

مطلب مرتبط: با Next.js با استفاده از Nextra یک سایت Doc بسازید

کارهای بسیار بیشتری می‌توانید با متغیرها در Less انجام دهید، از جمله درهم‌گذاری (interpolation) که به شما امکان می‌دهد از متغیرها به عنوان نام‌های سلکتور، URLها و موارد دیگر استفاده کنید. در اینجا مثالی از نحوه پیاده‌سازی درهم‌گذاری متغیرها آورده شده است:

@custom-selector: container;

.@{custom-selector} {
    padding: 10px;
    margin: 10px;
    border: solid 10px;
}

بلوک کد بالا از عبارت @{…} برای استفاده از یک متغیر به عنوان سلکتور استفاده می‌کند. پس از کامپایل، کد به شکل زیر خواهد بود:

.container{
    padding: 10px;
    margin: 10px;
    border: solid 10px;
}

عملیات ریاضی در Less

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

@variable-1: 5px; // Multiplication Operation between variable and constant @variable-2: @variable-1 * 2 // Addition operation between value and variable. @variable-3: 10px + @variable-2

نحوه استفاده از Mixins

Mixins به شما امکان می‌دهد سبک‌ها (یا کد CSS) را در سراسر stylesheet دوباره استفاده کنید. سایر گسترش‌های CSS مانند Sass نیز Mixins دارند. برای نشان دادن نحوه کار Mixins در Less، یک فایل index.htm ایجاد کنید و کد زیر را اضافه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Using Less CSS</title>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
        architecto repudiandae ipsum animi velit id iste dolore reprehenderit
        dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
        facilis unde sequi.
    </p>
</body>
</html>

بعد، یک فایل style.less بسازید و خطوط زیر را اضافه کنید:

.sample-text() {
    background-color: yellow;
}

.first-letter() {
    background-color: red;
    color: white;
    font-size: 30px;
}

p {
    .sample-text();
}

p::first-letter {
    .first-letter();
}

در بلوک کد بالا دو کلاس mixin وجود دارد: .sample-text و .first-letter. وقتی می‌خواهید یک mixin را در بخش دیگری از stylesheet استفاده کنید، به سادگی با نام آن و پرانتز در انتها ارجاع می‌دهید: .mixin(). در مرورگر باید چیزی شبیه به این را ببینید:

مطلب مرتبط: 8 محبوب ترین چارچوب Backend برای توسعه وب

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

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

div p {
    color: red;
}

div {
    color: green
}

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

div {
    color: green;

    p {
        color: red;
    }
}

این نه تنها درک آن را آسان‌تر می‌کند، بلکه کد را نگهداری‌پذیرتر می‌سازد. ارجاع به سلکتورهای والد در Less با استفاده از عملگر & ساده‌تر است. برای مثال:

button {
    background-color: blue;
    border: none;

    &:hover {
        background-color: grey;
        transform: scale(1.2);
    }
}

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

button {
    background-color: blue;
    border: none;
}

button:hover {
    background-color: grey;
    transform: scale(1.2);
}

درک Scope و توابع در Less

مانند زبان‌های برنامه‌نویسی معمولی، متغیرها دامنه (scope) بلوکی که در آن تعریف می‌شوند را دارند. برای نشان دادن این موضوع، یک فایل جدید index.htm ایجاد کنید و کدهای پایهٔ HTML ارائه‌شده قبلی را اضافه کنید. سپس بلوک زیر را در تگ body اضافه کنید:

<div class="outer-div">
    Outer Div should be red.
    <br />
    <span class="inner-div">
       Inner div should be green.
    </span>
</div>

در فایل style.less، خطوط زیر را اضافه کنید:

@bg-color: red;

body {
    font-size: 40px;
    color: white;
    margin: 20px;
}

.inner-div {
    @bg-color: green;
    background-color: @bg-color;
}

.outer-div {
    background-color: @bg-color;
}

بلوک inner-div متغیر bg-color را دوباره تعریف می‌کند که فقط به آن بلوک محدود می‌شود. بنابراین رنگ سبز فقط به این کلاس اعمال می‌شود و بر متغیر جهانی bg-color تأثیری ندارد. وقتی کامپایل کنید و نتیجه را در مرورگر باز کنید، باید این را ببینید:

مطلب مرتبط: نحوه پیاده سازی تأیید هویت توکن در Next.js با استفاده از JWT

Less همچنین توابع مفیدی ارائه می‌دهد که می‌توانند در برخی موقعیت‌ها مفید باشند. برای مثال، اگر بخواهید یک استایل را فقط در صورت برآورده شدن یک شرط تنظیم کنید، می‌توانید از تابع if استفاده کنید. این تابع دارای سینتکس زیر است:

if((condition), value1, value2)

این کد در صورتی که شرط برقرار باشد value1 و در غیر این صورت value2 را باز می‌گرداند. در اینجا یک مثال آورده شده است:

@var1: 20px;
@var2: 20px;

div {
    padding: if((@var1 = @var2), 10px, 20px);
}

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

div {
    padding: 10px;
}

کارهای بیشتری با Less و سایر گسترش‌های CSS

هزاران توسعه‌دهنده از Less استفاده می‌کنند تا نوشتن CSS لذت‌بخش‌تر شود. ویژگی‌های شگفت‌انگیزی مثل توابع، mixins و متغیرها تنها بخش کوچکی از آنچه Less ارائه می‌دهد، هستند.

Less برای پروژه‌های کوچک و بزرگ مناسب است. شایان ذکر است که سایر زبان‌های گسترش CSS همانند Sass و Stylus نیز بسیار شگفت‌انگیز هستند و ارزش بررسی دارند.

Tags: توسعه وب سی اس اس