Less :: the dynamic style sheet language

[alismith]

سلام

دوستان چند وقتی بود که به انجمن سر نزده بودم و پست و تاپیک هم خبری نبود ;)
اما امروز گفتم دوستان رو با یک ایده جدید در استفاده از css اشنا کنم
در این روش شما با استفاده از یک فایل جاوا اسکریپت می توانید selector هایی را در اختیار داشته باشید که در افزایش زیبایی و سرعت طراحی سبک برای صفحات سایتتان موثر می باشد و قدرت قابل قبولی به شما طراحان عزیز ارائه می کند

در این روش فایل های css شما دارای پسوند less می شوند

نکته برای استفاده از این ایده ابتدا باید فایل استایل و بعد فایل جاوا اسکریپت مربوطه را در صفحه سایت فراخوانی کنید


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


امکانات موجود در این روش :

variables, mixins, operations and functions



Variables

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
/* Compiled CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}




Mixins

// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* Compiled CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}




Functions & Operations

// LESS

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

/* Compiled CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}




برای دریافت فایل می توانید به سایت سازنده مراجعه کنید

http://lesscss.org/


موفق باشید

[hamiii]

ایده ی خوبیه. چه مزیتی نسبت به حالت عادی داره.
برخلاف اسمش به نظر میاد حجم کد نویسی رو بالا میبره!