آموزش LESS بخش هفتم

در مقاله قبل ، از قابلیت تو در تو نویسی زبان less و همچنین mixin ها استفاده کردیم . در این مقاله که آخرین بخش از آموزش زبان شیوه نامه LESS می باشد ، استفاده از یک یا چند آرگومان را در less یاد میگیریم و در نهایت ، کدهای style.less را بطور کلی خواهیم دید و لینک دانلود این پروژه در آخر مقاله موجود می باشد .

اکنون border دیگری با یک آرگومان تعریف می کنیم :

                              
.BorderWithArgument(@color: #f00) {
    border: 3px solid @color;
}

که از این حاشیه در منوی سایت استفاده می کنیم :

                              
   .menu {
    width: 100%;
    background-color: #dd5500;
    .BorderWithArgument(black);
    float: right;
    ul {
        li {
            list-style: none;
            float: right;
            border-left: 1px solid #000;
            a {
                display: block;
                padding: 10px 20px;
                color: @color2;
                text-decoration: none;
            }
            &:hover {
                background-color: #fff;
            }
        }
    }
}

توضیح : مشاهده می شود که منوی سایت بخوبی از قابلیت nested بهره برده است . خاصیت BorderWithArgument اگر با آرگومان (رنگ حاشیه) صدا زده شود ، رنگ حاشیه برابر همین رنگ خواهد شد وگرنه رنگ حاشیه مقدار پیش فرض #f00 را که در کلاس آن تعریف شده ، میگیرد .

نکته : اگر بخواهیم خواصی مانند hover را در less تعریف کنیم ، مانند کد بالا ، از علامت &:hover استفاده میکنیم . در صورتی که بخواهیم hover لینکهای منو را بطور کلاسیک تعریف کنیم بدین صورت می شود :

                              
   .menu ul li a:hover { }

در نهایت نیز کلاسی بنام clear تعریف می کنیم :

                              
.clear {
    clear: both;
}

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

                              
@w: 400px;
@h: 400px;
@color1: #ff8822;
@color2: @color1 + #444;
@dir: rtl;
@centered: 0 auto;
@FontFace: Tahoma;
/*******************************************/
* {
    margin: 0;
    padding: 0;
}
.container {
    max-width: 100%;
    direction: @dir;
}
.box {
    width: @w;
    height: @h;
    background: @color2;
    margin: @centered;
    h1 {
    text-align: center;
    color: @color1+#999;
    padding: 20px;
    .border-radius(20px, 5px);
    }
}
.border-radius(@radius: 12px, @width: 10px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    border-width: @width;
}
.border-radius(@_ @_) {
    border-color: #808080;
    border-style: solid;
    background-color: @color1 – #۶۶۶;
}
.bordered {
    border: 1px solid blue;
}
.mixin {
    text-align: center;
    color: @color1;
    .bordered;
    padding: 10px 0;
    font-family: @FontFace;
}
.mixin.footer {
    background-color: #666;
}
.BorderWithArgument(@color: #f00) {
    border: 3px solid @color;
}
.menu {
    width: 100%;
    background-color: #dd5500;
    .BorderWithArgument(black);
    float: right;
    ul {
        li {
            list-style: none;
            float: right;
            border-left: 1px solid #000;
            a {
                display: block;
                padding: 10px 20px;
                color: @color2;
                text-decoration: none;
            }
            &:hover {
                background-color: #fff;
            }
        }
    }
}
.clear {
    clear: both;
}

به نکات زیر دقت کنید :

  1. اگر چند فایل less داشته باشیم و بخواهیم به فایل less اصلی اضافه کنیم بصورت زیر از دستور import در بالای فایل اصلی less استفاده می کنیم :
  2.  
  3.  
  4. روش سوم برای کامپایل less ، استفاده از کامپایلرهای آنلاین مانند وب سایت های less2css.org و lesstester.com می باشد . که با مراجعه به این سایت ها ، کد less خود را در باکس مربوطه کپی کرده و کدهای css را تحویل بگیرید !

 

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

دانلود سورس کد آموزش LESS

لطفا دیدگاه ها و سوالات خود را به ایمیل EhsanSafari@hotmail.com ارسال نمائید . با تشکر .


تاریخ انتشار : ۱۷ فروردین ۱۳۹۵



دیدگاه ها :