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

Лещёв ИванДонецк, Ардиком

punkundead@gmail.comhttp://vkontakte.ru/punk_undeadhttp://www.facebook.com/punkundead