design-patterns - una - para que un campo tipo checkbox aparezca marcado por defecto utilizamos el atributo:

¿Patrones de diseño para escribir múltiples temas en Stylus/Sass?

Question

Estoy escribiendo una hoja de estilo para un sitio web donde necesito admitir varias máscaras / temas. Por ejemplo, un tema podría ser negro sobre blanco con rojo como color primario, y otro podría ser blanco sobre negro con granate como color primario.

Casi todos los CSS de un tema se traducen en el otro tema, a excepción de cosas como el color de primer plano y el de fondo.

Como ejemplo ilustrativo, digamos que tenemos un div. El tamaño y la posición de ese div se fija entre los temas, pero el color puede cambiar. Podríamos separar esto en tres diferentes archivos CSS como ese:

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

Luego, el usuario final cargaría main.css más una de las hojas de estilo del tema. Otro diseño sería poner una clase en el elemento del cuerpo y usar selectores para aplicar los colores correctos, todo en un solo archivo CSS. Por ejemplo,

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

La ventaja de la segunda opción es que hay menos solicitudes HTTP. La ventaja de la primera opción es que el usuario necesita cargar menos datos del servidor. Esto es especialmente importante cuando hay muchos temas diferentes y (como en mi caso de uso) cuando las imágenes de fondo incorporadas aumentan significativamente el peso de los archivos CSS.

Entonces mi pregunta es, ¿cómo puedo aprovechar el poder de los preprocesadores CSS como SASS o Stylus para crear múltiples archivos de tema CSS?

Imagino algo como esto tal vez:

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;

    background-color: $primaryColor;
}

que a su vez generaría los tres archivos CSS listados anteriormente en el primer ejemplo.

¿Algunas ideas? ¿Algo como esto ya existe?

Answer 1

Tengo más experiencia con Sass, por lo que mi respuesta se centrará principalmente en eso. En cuanto a Stylus, no sé lo suficiente como para comentar.

En mi opinión, tu primera opción es la más adecuada. En primer lugar, es relativamente fácil incluir dinámicamente el segundo archivo .css ''específico'' del tema y, como mencionaste, mantiene los estilos esbeltos si vas a terminar con muchos temas ya que tienes la hoja de estilo base y luego un tema específico hoja de estilo

También es más escalable que su segunda opción, ya que puede crear otro tema y solo agregar el nuevo archivo .css a su servidor / aplicación, mientras que con la segunda opción debe volver a cargar todo el archivo. No es demasiado problema, pero mantener ese archivo Sass probablemente terminará siendo bastante tedioso si tienes muchos temas, incluso si los divides en parciales y luego @import ''themes/theme-red'' o algo similar en el Sass principal Hoja de estilo antes de compilar

Desafortunadamente, Sass no tiene muchas opciones de compilación de servidores disponibles, donde puede generar dinámicamente los estilos en función de un tema seleccionado. Un compilador llamado phpSass existe, pero parece haber desaparecido en gran parte ahora y no estoy seguro de lo bueno que sería. LESS se usa más ampliamente para la compilación dinámica ya que hay más opciones para la compilación tanto en el lado del servidor como en el lado del cliente si se inclina a considerarlo.

Answer 2

Así es como terminé haciendo esto. Cree tres archivos Stylus: main.styl , theme1.styl y theme2.styl . Luego edite su contenido como se muestra a continuación:

// theme1.styl
primaryColor = red
@require("main.styl")

// theme2.styl
primaryColor = maroon
@require("main.styl")

// main.styl
#box {
    top: 50px
    left: 50px
    width: 200px
    height: 200px
    background-color: primaryColor
}

Entonces, con lo que terminamos es un theme1.css y un theme2.css que contienen todas las definiciones para la aplicación con sus respectivos temas. (Ya no necesitará usar main.css ).