مقدمه متغیرها در Less

چاپ

توضیحات مقدماتی 

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

مثالی از متغیرها در Less

در مثال زیر، می توانید کاربرد متغیرها را در Less مشاهده کنید:

 

<html>
<head>
 <link rel="stylesheet" href="/style.css" type="text/css" />
 <title>LESS variables overview</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<div class="div1">
 <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
<div class="div2">
 <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p>
</div>
</body>
</html>

 اکنون فایل style.less را ایجاد می کنیم:

 

@color1: #ca428b;
.div1{
 background-color : @color1;
}
.div2{
 background-color : @color1;
}

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

 

lessc style.less style.css

 با استفاده از دستورات بالا، فایل style.css به طور اتوماتیک، به صورت زیر ایجاد می شود:

 

h1 {
 color: #D0DC11;
}
.div1 {
 background-color: #ca428b;
 color: #D0DC11;
}
.div2 {
 background-color: #ca428b;
 color: #D0DC11;
}

 با انجام گام های زیر، می توانید مشاهده کنید که کدهای بالا چگونه کار می کنند:

مشاهده ی مثال بالا در ادیتور کدپن 

 با استفاده از ادیتور زیر، می توانید کدهای بالا را به صورت زنده مشاهده کنید:

See the Pen مقدمه متغیرها در لس by Ehsan Abbasi (@sbaloot) on CodePen.

نوشته شده توسط احسان عباسی
بازدید: 3513