Layout-BOxmodel

layOut-positions

Static

Fixed

Relative

Absolute

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

Z-index to rescue

z-index property specifies the stack order of an element.

Less

The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as 

variables,mixins, operations and functions.

http://lesscss.org/

Variables

@color: #4D926F;

#header {
  color: @color;
}

Mixins

rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Mixins-2

The @arguments variable

box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Nested Rules

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}/* Compiled CSS */
#header h1 {font-size: 26px;font-weight: bold;}
#header p { font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover { border-width: 1px;}

Advanced Usage of &

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

Will output

2

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

Functions & Operations

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Pattern-matching

Sometimes, you may want to change the behaviour of a mixin, based on the parameters you pass to it.

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

2

Now, if we run:

@switch: light;

.class {
  .mixin(@switch, #888);
}

We will get the following CSS:

.class {
  color: #a2a2a2;
  display: block;
}

SCOPE

Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked up locally, and if they aren’t found, the compiler will look in the parent scope, and so on.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

String interpolation

Variables can be embeded inside strings in a similar way to ruby or PHP, with the @{name} construct:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Escaping

Sometimes you might need to output a CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesn’t recognize.

To output such value, we place it inside a string prefixed with ~, for example:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}