crear diferentes archivos css de la misma menos de archivos

Question

Me preguntaba si alguien había encontrado una manera de crear diferentes archivos CSS de la misma menos de archivos.

En mi contexto, he creado un cliente diferente, menos de archivo.Este archivo consiste en una serie de variables con sus valores para el tema de un color específico y otras CSS instrucción.

También tengo un menos de archivo para la configuración predeterminada.

Aquí una representación de al menos carpeta

• Menos Carpeta
  • Mi menos carpeta
    • Todo el estilo específico para mi contexto
• cliente.por defecto.menos

• cutomer.menos

  Me gustaría compilar dos diferentes hojas de estilo css de la "Mi menos la carpeta de" el primero, que utilice el cliente.por defecto.menos de archivo en las variables.El segundo uso del cliente.menos de archivo.La creación de el cliente.por defecto.css y el cliente.css.Con el fin de tener el cliente.css y el cliente.por defecto.css todo el camino, en sintonía juntos.

Actualmente estoy usando el compilador plugin en webstorm.Estoy utilizando la herramienta adecuada?

Gracias

Answer 1

Puede producir múltiples salidas CSS de un archivo menos, siempre que use los archivos 'Control' menos.

E.G., Aquí está la hoja de estilo principal que estamos usando para un sitio:

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

Ahora, queremos producir una hoja de estilo secundaria (para emitir 'Customer.Default.CSS', o 'Customer.CSS' como lo prefiere): importamos los principales menos y anulamos sus variables:

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

Tenga en cuenta que no definen ninguna regla o establezca ningún estilo aquí, solo anule las variables.

Aquí están los archivos CSS de salida:

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

Esto es posible porque menos usa carga perezosa .

Asegúrese de que la configuración de Watcher File 'SOLAMENTE SOLAMENTE LOTE FILS' esté deshabilitada; De lo contrario, la hoja de estilos principales en nuestro ejemplo no produciría ningún CSS de salida.

(también, separaría los dos bloques de declaraciones variables en sus propios archivos menos, tal vez como theme-variables-default.less y theme-variables-override-a.less)

Answer 2

Creo que esto se puede lograr usando la grunt-contrib-less GruntJS tarea con algo como esto en tu Gruntfile.

less: {
  development: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  },
  production: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  }
}

MENOS no es mi pan con mantequilla, pero Sass suficiente y la grunt-contrib-sass tarea supongo que el mismo conjunto de características que existen.