Anidando con Less

Anidando con Less

Cuando te enfrentas a un css se te puede dar algo similar a:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

Con less podemos seguir optando por esta forma de escritura o podemos anidarla de manera que nos quedaría:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

O de otra manera:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Con lo que ahorramos tiempo y espacio.

Es requisito destacar la funcionalidad de &.  Con especial interés en :hover :focus

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

Lo que nos devuelve:

 .bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

Anidando con Less 1

Media Queries anidadas.
Podemos resumir según contabamos en Anidando con Less.

.one {
    @media (width: 400px) {
        font-size: 1.2em;
        @media print and color {
            color: blue;
        }
    }
}

El código que desarrollaríamos en css como:

@media (width: 400px) {
  .one {
    font-size: 1.2em;
  }
}
@media (width: 400px) and print and color {
  .one {
    color: blue;
  }
}

Uso anticipado de &
Para invertir el orden de anidamiento:

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

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