سلام دوباره خدمت شما علاقه مندان به آموزش برنامه نویسی و آموزش Less. در قسمت قبلی آموزش Less با آموزش ادغام فایل ها یا importing در Less در خدمت شما بودیم. در این جلسه با متغیرها در Less آشنا می شویم.
متغیر چیست؟
همانگونه که می دانید CSS یک زبان برنامه نویسی نیست و از همین جهت نمی توان در آن متغیر تعریف کرد. متغیرها مشخصه ای هستند که می توان به آن ها ارزشی را نسبت داد که در طول برنامه قابل تغییر نیز باشند که باعث جلوگیری از تکرار کدنویسی میشود. متغیرها از یک نام و مقداری که به این نام اختصاص داده میشود تشکیل شده اند.
تعریف متغیر در Less
برای تعریف یک متغیر در Less از نماد (@) در ابتدای نام متغیر استفاده می شود و برای تعیین مقدار متغیر بعد از نام متغیر از نماد دو نقطه (:) استفاده می کنیم. به مثال زیر توجه کنید:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <title>Define Variable in Less</title> </head> <body> <div class = "class1"> <h1>How to Define Variable in LESS</h1> <p>To define a variable in Less, the symbol (@) is used at the beginning of the variable name, and we use the two-point symbol (:) to determine the value of the variable after the name of the variable.</p> </div> </body> </html>
در فایل style.less یک متغیر به نام color تعریف می کنیم و کد رنگ قرمز را به آن نسبت می دهیم.
.class1 { @color: #f30b0b; background-color: @color; }
حال فایل style.less را به style.css کامپایل می کنیم.
lessc style.less style.css
فایل style.css به صورت زیر ساخته ویرایش می شود
.class1 { background-color: #f30b0b; }
سند html به شکل زیر اجرا می شود:
