آموزش متغیرها در Less

1396/8/20 علیرضا حاتمی نیا 79

less-Variables

سلام دوباره خدمت شما علاقه مندان به آموزش برنامه نویسی و آموزش 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 به شکل زیر اجرا می شود:

less-variable-tutorial

 

 

کلمات کلیدی

Less
متغیرها
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت