در صورتی که بخواهیم نامی در css ایجاد کرده تا از مقدار آن در دستورات css خود استفاده کنیم می توانیم از متغیرها یا variables استفاده نماییم.
در این حالت دستورات css خود را به متغیرهای تعریف شده تخصیص داده و هر جایی که بخواهیم نام های متغیر را فراخوانی می کنیم.
مزیت این کار این استی که می توانیم با تغییر مقادیر css در متغیر مورد نظر، دستورات css خود را سریعا تغییر دهیم و دیگر نیازی نیست برای تغییر مقادیر دستورات css تک به تک آنها را عوض کنیم. بنابراین همین کار باعث افزایش سرعت اعمال تغییرات بر روی المنت ها می شود.
نحوه نوشتن:
|
1 |
@variable-name:value; |
نحوه استفاده:
|
1 2 3 |
selector{ color:@variable-name } |
مثال:
|
1 2 3 4 5 6 |
@color-theme:red; header{ background-color:@color-theme; } //background-color is red |
