Skip to main content

Posts

Showing posts from December, 2014

LESS summary

LESS summary http://lesscss.org/ Feature Example Variable @nice-blue: #5B83AD ; @light-blue: @nice-blue + #111 ; #header { color : @light-blue ; } Nesting #header { color : black; } #header .navigation { font-size : 12px ; } #header .logo { width : 300px ; } Into LESS: #header { color : black; .navigation { font-size : 12px ; } .logo { width : 300px ; } } Parametric Mixins .border-radius ( @radius ) { -webkit-border-radius : @radius ; -moz-border-radius : @radius ; border-radius : @radius ; } or with default value: .border-radius ( @radius : 5px ) { -webkit-border-radius : @radius ; -moz-border-radius : @radius ; border-radius : @radius ; } #header { .border-radius ( 4px ); } .button { .border-radius ( 6px ); } Operations @base: 5% ; @filler: @base * 2 ; @other: @base + @filler ; Namespaces and Accessors Define: #bundle { .button { display : block; border : 1px