آموزش LESS بخش ششم

در مقاله قبل ، پیاده سازی یک صفحه وب سایت را توسط زبان شیوه نامه less آغاز کردیم و منوی سایت را تعریف کردیم و متغیرهای لازم را در less تعریف کردیم . در این جلسه می خواهیم کدهای css مربوط به آن را تعریف کنیم .

در مرحله بعد css reset را بیان می کنیم :

                              
* {
    margin: 0;
    padding: 0;
}

یعنی این دو خاصیت را به تمام المانهای سایت اعمال می کند .

کلاس container را بصورت زیر تعریف می کنیم :

                              
.container {
    max-width: 100%;
    direction: @dir;
}

مشاهده می کنید که direction را برابر @dir یا همان rtl قرار داده ایم تا در فارسی نویسی دچار مشکل نشویم .

حالا نوبت تعریف کلاس box است :

                              
.box {
    width: @w;
    height: @h;
    background: @color2;
    margin: @centered;
    h1 {
        text-align: center;
        color: @color1+#999;
        padding: 20px;
        .border-radius(20px, 5px);
    }
}

قابلیت تو در تو نویسی در less :

همانطور که در کلاس box می بینید ، h1 بصورت Nested و یا تو در تو در box تعریف شده است ، در صورتی که اگر می خواستیم مانند قبل عمل کنیم h1 را باید بصورت .box h1 تعریف میکردیم .

در h1 خاصیت border-radius دارای آرگومان می باشد (مانند توابع) . در کد زیر .border-radius را تعریف کرده ایم :

                              
.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 – #۶۶۶;
}

توضیح : کلاس border-radius دارای دو پارامتر می باشد که اولی radius (یعنی مقدار خمیدگی حاشیه های اطراف) و دومی مقدار ضخامت حاشیه و یا border می باشد . کلاس دوم که بصورت .border-radius(@_ @_) تعریف شده است بدین معنی می باشد که مقادیر radius و width هر چه می خواهد باشد ، رنگ حاشیه و استایل آن بصورت تعریف شده باشد .

در مرحله بعد یک mixin بنام bordered تعریف کرده ایم :

                              
.bordered {
    border: 1px solid blue;
}

کلاس بعدی بنام mixin می باشد :

                              
.mixin {
    text-align: center;
    color: @color1;
    .bordered;
    padding: 10px 0;
    font-family: @FontFace;
}

توضیح : در این کلاس ، رنگ متن و نام فونت را از متغیرهای less گرفتیم و سایر خاصیت ها را دستی تعریف کردیم . و همچنین از mixin ای بنام borderd استفاده کرده ایم .

در فوتر سایت از همین کلاس mixin استفاده کردیم بعلاوه footer زیرا می خواهیم فوتر سایت ما علاوه بر اینکه خواص mixin را داشته باشد ، رنگ پس زمینه آن نیز متفاوت باشد :

                              
    .mixin.footer {
        background-color: #666;
    }


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



دیدگاه ها :