نحوه استفاده از توابع در CSS کمتر

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

Less CSS یک پیش پردازنده قوی و پویا CSS است که در سال های اخیر توجه و محبوبیت قابل توجهی را به خود جلب کرده است. به‌عنوان پیش‌پردازنده، با ارائه مجموعه‌ای از ویژگی‌ها و قابلیت‌های اضافی که تجربه کلی استایل‌سازی را بهبود می‌بخشد، به‌عنوان افزونه «Vanilla CSS»، زبان سنتی استایل‌سازی CSS که در توسعه وب استفاده می‌شود، عمل می‌کند.

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

توابع چیست و چرا مهم هستند؟

در برنامه نویسی، تابع یک بلوک کد است که وظیفه خاصی را انجام می دهد. همچنین می توانید از آن در جای دیگری در برنامه استفاده مجدد کنید. توابع معمولا داده ها را می گیرند، پردازش می کنند و نتایج را برمی گرداند.

آنها کاهش کدهای تکراری در یک برنامه را آسان می کنند. به عنوان مثال، فرض کنید برنامه ای دارید که تخفیف را بر اساس قیمتی که کاربر وارد می کند محاسبه می کند. در زبانی مانند جاوا اسکریپت، می توانید آن را به صورت زیر پیاده سازی کنید:

function checkDiscount(price, threshold){
    if (price >= threshold){
        let discount = 5/100 * price;
        return `Your discount is $${discount}`;
    } else {
        return `Sorry, this item does not qualify for a discount. `
    }
}

سپس می توانید تابع را فراخوانی کنید و قیمت و آستانه را پاس کنید.

let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))

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

درک توابع در CSS کمتر

در CSS سنتی، مجموعه بسیار محدودی از توابع در دسترس شما به عنوان یک توسعه دهنده وجود دارد. یکی از محبوب ترین توابع در CSS تابع ریاضی calc() است که دقیقاً همان کاری را که به نظر می رسد انجام می دهد – محاسبات را انجام می دهد و از نتیجه به عنوان مقدار خاصیت در CSS استفاده می کند.

p{
    background-color: red;
    width: calc(13px - 4px);
}

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

@width: 10px;
@height: 20px;
div{
    margin:if((@width > @height), 10px, 20px)
}

در بلوک کد بالا، کامپایلر Less بررسی می کند که آیا عرض متغیر (تعریف شده با نماد @) از ارتفاع متغیر بیشتر است یا خیر. اگر شرط درست باشد، تابع اولین مقدار را بعد از شرط (10px) برمی‌گرداند. در غیر این صورت، تابع مقدار دوم (20px) را برمی گرداند.

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

div {
    margin: 20px;
}

نحوه استفاده از Boolean در کمتر

بولی متغیری است که دارای دو مقدار ممکن است: true یا false. با تابع boolean() در Less، می توانید مقدار true یا false یک عبارت را در یک متغیر برای استفاده بعدی ذخیره کنید. در اینجا نحوه کار آن آمده است.

@text-color: red;
@bg-color: boolean(@text-color = red);

در بلوک کد بالا، کامپایلر Less بررسی می کند که رنگ متن قرمز است یا خیر. سپس، متغیر bg-color مقدار را ذخیره می کند.

div{
    background-color: if(@bg-color,green,yellow);
}

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

div {
  background-color: green;
}

جایگزین کردن متن در یک رشته با تابع ()replace

دستور تابع ()replace به شکل زیر است:

replace(string, pattern, replacement, flags)

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

به صورت اختیاری، تابع ()replace می‌تواند حاوی پارامتر flags برای پرچم‌های عبارت منظم باشد.

@string: "Hello";
@pattern: "ello";
@replacement: "i";

div::before{
    content: replace(@string,@pattern,@replacement)
}

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

div::before {
  content: "Hi";
}

لیست توابع در CSS کمتر

در CSS کمتر، از کاما یا فاصله برای تعریف لیستی از مقادیر استفاده می کنید. مثلا:

@groceries: "bread", "banana", "potato", "milk";

می توانید از تابع length() برای ارزیابی تعداد عناصر موجود در لیست استفاده کنید.

@result: length(@groceries);

همچنین می توانید از تابع extract() برای استخراج مقدار در یک موقعیت خاص استفاده کنید. به عنوان مثال، اگر می خواهید عنصر سوم را در لیست مواد غذایی دریافت کنید، موارد زیر را انجام دهید:

@third-element: extract(@groceries, 3);

برخلاف زبان های برنامه نویسی معمولی که فهرست فهرست از 0 شروع می شود، شاخص شروع یک لیست در CSS کمتر همیشه 1 است.

یکی دیگر از تابع های لیست که می تواند هنگام ساخت وب سایت با Less مفید باشد، تابع range() است. در سه پارامتر طول می کشد. پارامتر اول موقعیت شروع را در محدوده مشخص می کند. پارامتر دوم موقعیت پایان را نشان می دهد و آخرین پارامتر مقدار افزایش یا کاهش بین هر آیتم در محدوده را مشخص می کند. اگر ارائه نشده باشد، مقدار پیش فرض 1 است.

div {
    margin: range(10px, 40px, 10);
}

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

div {
 margin: 10px 20px 30px 40px;
}

همانطور که می بینید، کامپایلر Less CSS از 10 پیکسل شروع می شود و مقدار قبلی را 10 افزایش می دهد تا به موقعیت پایانی (40 پیکسل) برسد.

ساخت یک وب سایت ساده با توابع CSS کمتر

وقت آن است که همه چیزهایی را که یاد گرفته اید جمع آوری کنید و یک پروژه ساده با Less CSS ایجاد کنید. یک پوشه ایجاد کنید و فایل های index.htm و style.less را اضافه کنید.

فایل index.htm را باز کرده و کد HTML زیر را اضافه کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>
        </h1>
    </div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>

در بلوک کد بالا، یک div “container” والد با یک عنصر h1 خالی وجود دارد. ویژگی src در تگ اسکریپت به مسیر کامپایلر Less CSS اشاره می کند.

بدون این تگ اسکریپت، مرورگر قادر به درک کد شما نخواهد بود. همچنین، می‌توانید با اجرای دستور زیر در ترمینال، Less CSS را از طریق Node Package Manager (NPM) بر روی رایانه خود نصب کنید:

npm install -g less

هر زمان که آماده کامپایل کردن فایل .less هستید، به سادگی دستور زیر را اجرا کنید، مطمئن شوید فایلی را که کامپایلر باید خروجی را روی آن بنویسد را مشخص کنید.

lessc style.less style.css

در فایل style.less، دو متغیر ایجاد کنید: container-width و container-bg-color تا به ترتیب عرض و رنگ پس زمینه Div “container” را نشان دهند.

@container-width: 50rem;
@container-bg-color: yellow;

بعد، سه متغیر ایجاد کنید: رشته، الگو و جایگزینی. سپس استایل ها را برای div “container” و عنصر h1 اضافه کنید.

@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";

.container{
    width: @container-width;
    background-color: @container-bg-color;
    padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
    border: solid;
}

h1:first-child::after{
    content: replace(@string,@pattern,@replacement);
}

در بلوک کد بالا، تابع range() ویژگی padding را روی div “container” تنظیم می کند. کامپایلر Less باید فایل style.less را در موارد زیر کامپایل کند:

.container {
  width: 50rem;
  background-color: yellow;
  padding: 20px 40px 60px 80px;
  border: solid;
}
h1:first-child::after {
  content: "Hello from the inhabitants of Pluto!";
}

وقتی فایل index.htm را در مرورگر باز می کنید، این چیزی است که باید ببینید:

بهره وری خود را با پیش پردازنده های CSS بهبود بخشید

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

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

منبع مقاله