Variáveis, como o próprio nome diz são coisas que variam dependendo do usuário ou dos dados que lê foram dados, um exemplo simples são aqueles sites de banco ou de lojas online, já percebeu que você acaba de criar uma conta e lá em cima já aparece "Seja Bem Vindo, Fernando" ou seja o nome dá saudação muda de acordo com a conta acessada se for da Maria aparecerá "Seja Bem Vinda, Maria". Mas as Variáveis do Blogger são um pouco diferente pois elas definem cor e fonte. Por isso existe aquele painel chamado "Fontes e cores" que fica em Layout->Fontes e cores, se não existisse aquele painel os usuários teriam que mudar a cor direto no CSS por isso que foi criado as variáveis para que elas facilitassem o usuário a ter uma cor que ele quer sem saber nada de CSS ou HTML.

As Variáveis ficam abaixo do trecho de inicio da CSS mas não fazem parte deste grupo. Assim que você carrega seu blog no navegador ele converte aquilo em outros códigos que geram as Cores e Fontes. O local que elas ficam no HTML é entre as tags <b:skin><![CDATA[/* e ]]></b:skin>, mais especificadamente abaixo do créditos.Veja no esquema abaixo um mini trecho de variáveis:
Como vocês podem ver a primeira variável é de cor vamos ver ela e descrever suas partes: 
<Variable name="bgcolor" description="Fundo do blog" 

type="color" default="#fff" value="#ffffff">

Acima é uma váriavel que definira o fundo do blog, vamos ver as partes dela:
name="bgcolor" -> Este trecho define o nome que será usado para definir a variável.
description="Fundo do blog" -> Define o nome que será apresentado no painel para identificar a variável.
type="color" -> Define o tipo da variável se ela é color que é cor ou se ela é font que é fonte.
default="#fff" -> Define a cor padrão caso o usuário não escolha nenhuma.
value="#ffffff" -> Este valor não precisa ser alterado pois ele será mudado pelo painel. A não ser que queira colocar um valor que não tenha no painel.

Como aplica-las ao meu CSS

Vamos a mais um exemplo vamos supor que queremos que o fundo seja variável e possa ser controlado pelo painel, vamos ao trecho que define o fundo da página:
body{
background: $bgcolor;
}
Para definir a variável foi utilizado o atributo name precedido do Cifrão, então para que o fundo seja variável basta inserir $ + atributo name que ficará no nosso exemplo $bgcolor.

Como fica tudo pronto

Se o nosso CSS fosse só isso ficaria da seguinte forma:
<b:skin><![CDATA[/*
/* Variable definitions
====================
<Variable name="bgcolor" description="Fundo do blog" type="color" default="#fff" value="#ffffff">
*/
body{
background: $bgcolor;
}
]]></b:skin>
Ai poderíamos ir ao painel e vê-lo da seguinte forma:

Clique para ampliar.

No próximo post veremos um pouco das variáveis de fonte...
Atenção se tiver dúvida pergunte no nosso fórum...