RcBuilder@walla.com
call centre: 054-5614020

LESS Example

Posted by: RcBuilder  /   Category: CSS / LESS   /   No Comments
02
Nov
2014

LESS Example style.less /* using parameters */ @my-color: red; .classAA_1 { color: @my-color; } .classAA_2{ @my-color: blue; @my-font-size: 10px; color: @my-color; font-size: @my-font-size; } /* inheritance(mixins) */ .blue_theme{ background-color: blue; color: #fff; border:solid 1px #000; } .rounded-box-6px{ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .rounded-box(@radius: 5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .classAA_3{ .blue_theme; .rounded-box-6px; height:100px; width:300px; } .classAA_4{ .blue_theme; .rounded-box; height:100px; width:100px; float:left; } .classAA_5{ .blue_theme; .rounded-box(12px); height:100px; width:100px; float:left; } .border_custom(@color: #000; @size: 1px; @type: solid){ border: @color @size @type; // can use @arguments instead } .classAA_6{ .border_custom; padding:12px; } .classAA_7{ .border_custom(#FF0000, 3px, dashed); padding:12px; } /* nested rules */ a.link1{ color:red; text-decoration:none; &:hover{ color:blue; text-decoration:underline; } } ul.list { list-style-type:circle; margin:0; padding:0; li{ color:gray; a{ color:blue; } } } /* using operations */ @my-width: 100px; @my-height: 100px; .classA1{ background-color: lime; width:@my-width; height:@my-height; } .classA2{ background-color: lime; width:@my-width * 2; height:@my-height * 1.5; } @color_a:.

Read more
  • פיתוח מערכות
  • פתרונות טכנולוגים
  • קידום אתרים
  • בניית אתרים