Creación de variables

¿Para que sirven las variables? Las variables nos van a permitir cambiar de color de cualquier parámetro antes configurado, con un sólo clic, desde la pestaña de fuentes y colores. Cada plantilla trae el número de variables mínimo para el correcto funcionamiento de la plantilla, pero podemos añadirle cuantas queramos. Sucede muchas veces, cuando copiamos un código de otros lugares de la red, que nos da un error de variable. Eso sucede cuando en ese código aparece una variable (por ejemplo, $bordercolor) que no tenemos creada en nuestra plantilla. Las dos posibles soluciones son las siguientes: una borrar la variable del código y poner el color de la forma clásica (#940f04) o crear una variable que luego nos permitirá cambiar el color con más facilidad aquí:

hacer clic para agrandar

Crear una variable es muy fácil, sólo tenemos que copiar íntegramente otra y cambiarle el nombre y la descripción. A continuación vamos a crear una variable que nos permita configurar el color de los bordes, sería así:

<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#940f04">

Una vez creada la variable la colocaremos en los lugares que queramos que aparezca, por ejemplo, en los bordes de 'main', para ello pondremos el signo del dolar ($) seguido del nombre que le hemos dado a la variable:

#main{
width: 60%;
float: left;
margin-top: 1px;
border-top:1px dashed $bordercolor;
border-right:1px dashed $bordercolor;
border-left:1px dashed $bordercolor;
border-bottom:1px dashed $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}