Si sabéis lo que es CSS, sabéis que es un lenguaje muy poderoso, pero a la vez muy engorroso sintácticamente.

Me refiero a que tienes que especificar todos los valores que usas, siendo muchos repetidos, teniendo que usar 4 prefijos diferentes para la misma propiedad, etc.

Por eso desde hace unos años existen los preprocesadores de CSS.
Lo que hacen es añadir funcionalidades, como condicionales, variables, estilos anidados, etc.

Yo los he empezado a usar desde hace muy poco, pero si escribo sobre ellos aquí es porque creo que dan mucha facilidad a la hora de cambiar el CSS, y de dividir el trabajo.

Concretamente uso Sass (con compass), con su sintaxis SCSS (en mi opinion más fácil de usar y aprender).

Para que os hagáis una idea os dejo el código CSS y el SASS de algunos ejemplos:

Un gradiente:

CSS

.mi-caja-con-gradiente
{
    background: #F1F1F1;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #e3e3e3));
    background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: linear-gradient(#f9f9f9, #e3e3e3);
}

SASS

//Usaremos el mixin que viene con compass (con ponerlo una vez vale)
@import "compass";
.mi-caja-con-gradiente
{
    background: #f1f1f1;
    /*Cambiar esto es más fácil que cambiar todos los valores anteriores, ¿verdad?*/
    @include background-image(linear-gradient(#f9f9f9,#e3e3e3));
}

Para definir estilos sólo dentro del post:

/*Me los he inventado por el camino, salvo lo de oscurecer el color,
estoy casi seguro de que saldría un blog muy chillón*/
.post-body
{
   background: white;
   width: 90%;
   padding: 2em;
   margin: 0 auto;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.post-body a
{
   color: #f00;
}
.post-body a:hover
{
   /*queremos un color más oscuro que el rojo chillón que hemos puesto, y nos hemos pasado media hora para encontrar cómo conseguirlo*/
   color: #b30000;
}
.post-body img
{
   border: 3px solid #0F0;
}
.post-body .separator
{
   clear: both;
   margin: 1em auto;
}
.post-body .separator img
{
   border: 0;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

SASS

@import "compass";
.post-body
{
   background: white;
   width: 90%;
   padding: 2em;
   margin: 0 auto;
   @include box-sizing(border-box);

   // Sí, se definen unos estilos dentro de otros
   // Y si te preguntas por qué comento así, en SASS se puede
   // Estos comentarios son eliminados
   // mientras los de CSS /**/ se mantienen al compilar
   a
   {
      color: #f00;

      //para referenciar a un mismo elemento se usa  "&"
      &:hover
      {
         // Esta función oscurece, lighten aclara.
         color: darken(#f00, 15%);
      }
   }
   img
   {
      border: 3px solid #0F0;
   }
   .separator
   {
      clear: both;
      margin: 1em auto;

      img
      {
         border: 0;
         @include border-radius(3px);
      }
   }

}

Para definir las fuentes de los encabezados:

CSS

h1
{
    font-size: 1.9em;
}
h2
{
    font-size: 1.7em;
}
h3
{
    font-size: 1.5em;
}
h4
{
    font-size: 1.3em;
}
h5
{
    font-size: 1.1em;
}
h6
{
    font-size: .9em;
}

SASS

$font-size-decrement: .2em;
@for $i from 1 through 6
{
    h#{$i} 
    {
        font-size: 2.1em - $font_size_decrement * $i;
    }
}

En todos los casos, una vez compilado los códigos quedarán iguales. Y si quieres hasta lo comprime!.

Cómo instalar SASS y Compass

Ambos están escritos en ruby, así que es necesario tener instalado el intérprete de ruby.
Si usáis Mac o Linux probablemente ya esté instalado.
Si usáis Windows tendréis que ir a la página de descargas y descargaros la última versión (el link justo debajo de rubyInstallers).

Ahora instalaremos compass. Hay que abrir la terminal en Mac/Linux o click en ejecutar y escribir cmd.exe en windows.

Escribe el comando gem install compass (windows) o sudo gem install compass (Linux/Mac), pulsa enter, y listo!

Ahora sólo te falta crear un proyecto. Si entiendes la consola de comandos puedes moverte a cualquier directorio y crearlo allí. Si no, escribe cd /.
(ahora estás en la raíz del disco). Crearemos una carpeta llamada SASS usando mkdir SASS. Nos movemos a ella usando cd SASS, y creamos el proyecto usando compass create.

Ahora busca la carpeta SASS en el disco duro. Allí tienes dos carpetas, sass y stylesheets.
Edita, crea, y escribe en sass todo lo que quieras dentro de la carpeta sass.
Cuando acabes o quieras ver como queda pon en la consola compass compile /SASS, y aparecerá el resultado en la carpeta stylesheets.
Si quieres comprimirlo tendrás que usar compass compile /SASS -s compressed.