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

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

}

توضیح : کلاس 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;

    }

 


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



دیدگاه ها :