Less.The dynamic stylesheet language. Ivan Leshev.
-
Upload
drupalcampdn -
Category
Technology
-
view
1.001 -
download
0
Transcript of Less.The dynamic stylesheet language. Ivan Leshev.
Less. The dynamic stylesheet language.
Leshev Ivan
http://donetsk.drupal.ua
The dynamic stylesheet languagelesscss.org
less!=
less!=
less!=
less=
Variables
@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
/* Compiled CSS */
#header { color: #4D926F;}h2 { color: #4D926F;}
Mixings
.resetList() { ul, li{ margin:0; padding:0; list-style-image: none; list-style-type: none; background:none; line-height:100%; }}#block-block-1 .content{ .resetList()}
Mixings.clear-block(){ &:after, &:before { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } display: inline-block; *height: 1%; display: block;}
.foto-view .view-content{ .clear-block()}
Parametric mixings
.border-radius(@r : 10px){ -webkit-border-radius:@r; -moz-border-radius:@r; border-radius:@r;}
#maingamecontainer, #game_your_currentgames{ .border-radius(5px);}
Nested rules
#block-user-online{ position: absolute; top:90px; left: 43%; .content{ color: #000; }}
Nested rules
.game-statistic{ tbody{ tr:nth-child(odd){ background: #ddd; } }}
Nested ruleseasy to change
.game-statistic, .money-statistic{ tbody{ tr:nth-child(odd){ background: #eee; } tr:nth-child(even){ background: #ccc; } }}
Operationbe careful with subtraction
@base: 5%;@filler: @base * 2;@other: @base + @filler;
color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;
Color functionauto create your color schema
@base: #f04615;
.class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%);}
Pop-up selectormy patch
#container{ #center{ float: left; width: 100%; body.sidebar-first {margin-left: (0-@sidebarLeftWidth);} body.sidebar-second {margin-right:(0-@sidebarRightWidth);} body.two-sidebars {margin: 0 (0-@sidebarRightWidth) 0 (0-@sidebarLeftWidth);} } #squeeze{ padding:0 @space; body.sidebar-first {margin-left: @sidebarLeftWidth;} body.sidebar-second {margin-right:@sidebarRightWidth;} body.two-sidebars {margin: 0 @sidebarRightWidth 0 @sidebarLeftWidth;} }}
JavaScript evaluation
@var: `"hello".toUpperCase() + '!'`;@hello: `Drupal.t("Hello")`;
@pie:`(Drupal.settings.piePath&&";\nposition:relative;\n-pie-lazy-init:true;\nbehavior:url("+Drupal.settings.piePath+"/PIE.php)")||" "`;
.b-s-d(@s:#000,@p:" "){ -webkit-box-shadow: @s; -moz-box-shadow: @s; box-shadow:@s~"@{p}";}
.b-s(@s:~"1px 1px 0 #000"){.b-s-d(@s,@pie);}
Your CSS work
wild code, @import, etc
You can
though not required
Лещёв ИванДонецк, Ардиком
[email protected]://vkontakte.ru/punk_undeadhttp://www.facebook.com/punkundead