1

Quiero crear un widget y que ciertas opciones de estilos sean configurables mediante ajustes, como puede ser por ejemplo el tamaño de letra. La solución fácil sería que al generar el html añadiese ese estilo inline. Por ejemplo podría ser algo así:

<p style="font-size: 16px">...</p>

Pero me gustaría evitar añadir esos estilos mediante estilos inline. ¿Hay alguna forma de generar un archivo CSS de manera dinámica?

1 respuesta 1

0

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 _.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.