Lo que entiendo es que quieres parametrizar tu hoja de estilos CSS.
Para ello, te recomiendo la utilización de SASS, un pre-procesador de CSS que te permite utilizar variables, reutilizar código, etc...
De esta manera, SASS nos permite escribir una especie de pseudo-código que después será traducido a CSS.
EJEMPLO
Imagina que tienes un párrafo con un tamaño de letra y un span con el mismo tamaño de letra, (Ej: 16px). El párrafo tiene una clase llamada parrafo
y el span tiene una clase llamada texto
.
Con SASS se podría hacer de la siguiente manera:
$tamanoLetra: 16px; //Creamos la variable
.parrafo{
font-size: $tamanoLetra;
}
.texto{
font-size: $tamanoLetra;
}
Lo que se traduciría en CSS a:
.parrafo{
font-size: 16px;
}
.texto{
font-size: 16px;
}
Además, podrías tener tus variables de configuración en un fichero aparte (P.ej: _variables.scss
) y después importarla en el fichero en el que tuvieras tus clases.
De esta manera, tendrías por un lado las variables que podrías modificar y por otra las clases o ID que van a hacer uso de ellas, lo que te permitiría mantener mucho más fácilmente tu aplicación.
Esto lo podrías hacer mediante el atributo @import
.
@import 'variables'; //Importamos las variables de nuestra configuración
.parrafo{
font-size: $tamanoLetra;
}
.texto{
font-size: $tamanoLetra;
}
IMPORTANTE: Es muy importante que el nombre del fichero que vayas a importar empiece por una barra baja _.