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

آموزش 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 – #666;

}

.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 ارسال نمائید . با تشکر .


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



دیدگاه ها :