Si hubiera un CSS4 sería cómo Less (o sass)

¿Llevas tiempo haciendo CSS? ¿te resulta sencillo pero bastante coñazo? ¿CSS3 se te queda corto?
Pues tranquilo llegan las librerías para hacer que el CSS sea más rápido y sencillo de escribir. Y no hay que esperar a que la W3C de su visto bueno.

Hay muchas librerías que hacen esto en la actualidad, están intentando convertirse en un standard, como el jquery para javascript, pues esto para CSS.
Las más famosas son LESS ("menos"), SASS ("hablar con descaro" ¿?) y Stylus. Pero la batalla final parece que se está debatiendo entre LESS y SASS.

¿Cómo funcionan? son programitas que leen sus archivos (.less y .scss respectivamente) y te devuelven el CSS de toda la vida de dios que puedes adjuntar a tu página web.

Aunque algunos dicen que SASS esta un poquito mejor hecho yo me voy con LESS ¿Por qué?
Para probar LESS es tan fácil como incluir estas líneas en el head tu HTML,  y si te gusta te instalas lessPHP para que el usuario no cargue la libería.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script> Para probar SASS es un follón, tienes que instalar ruby, dentro sass, compass también...

Siempre digo que el CSS es un lenguaje interpretado pero no de programación (aunque con las animaciones uno ya no sabe...) con estas herramientas ya no está tan claro.
Ejemplos de uso
Imaginad que tenemos un color principal (#e5c138 en este caso) que vamos a usar en la página en diferentes formas y muchas veces:


p {
background:#e5c138;
}
a {
color:#e5c138;
background:#cccc;
}
h2 {
border:1px #e5c138 solid;
}
De esta forma tenemos que recordar el color continuamente y si queremos cambiarlo en toda la página hay que hacerlo 200 millones de veces.
Bien, pues con Less se usaría una variable


@colorPrincipal: #e5c138;


p {
background: @colorPrincipal;
}
a {
color:@colorPrincipal;
background:#cccc;
}
h2 {
border:1px @colorPrincipal; solid;
}

Si quisiéramos cambiar el color principal sólo tendríamos que poner "@colorPrincipal: #fffaaa;" y cambiaría en toda la página.

Mirad este anidamiento, en CSS repetimos #header mil veces

#header { font-family:arial, verdana, sans-serif; }
#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; }
En el .less queda más claro y sin tanta repetición:

#header {
  font-family:arial, verdana, sans-serif;
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Y mi preferido, los mixins, una especie de funciones (hay otras funciones avanzadas).
Imaginemos que queremos aplicar esquinas redondeadas y no poner 20 veces los prefijos de los navegadores, sería así

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


#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
El #header tiene el valor por defecto (5px) como podréis suponer se puede anidar clases de forma muy chula, imaginad que quiero hacer un botón siempre igual.


.botones-redondeados{
.rounded-corners(20px);
color:@colorPrincipal;
background:@colorSecundario;
}


Podéis hacer vuestros pinitos de prueba en la web de phpless online  Y tenéis con un poco más de profundidad estos ejemplos en la mágnífica web de anieto2k: LESS y SASS