Una herramienta o complemento IDE para aprovechar el desarrollo de archivos .less (Lean CSS) y la exportación de CSS

Si necesita MENOS soporte para Visual Studio 2010 (útil si desarrolla proyectos web con él), puede usar un complemento. Ya se ha discutido una solución candidata en Stack Overflow .

CssEsMenos

Esta extensión trae el resaltado de sintaxis incorporado y el autocompletado ya disponible en Visual Studio contra archivos .css sobre archivos .less. En realidad solo hace esto, sin compilación u otro soporte menos específico, pero sigue siendo algo.

Creo que esto es suficiente para el desarrollo dentro de Visual Studio 2010 hasta ahora, cuando se combina con mis otras prácticas establecidas que mencioné en mi pregunta:

Actualmente estoy usando el módulo Node.js LESS (Lean CSS) sin el complemento grunt para producir archivos CSS. Tengo scripts de shell que exportan MENOS a CSS y los ejecuto manualmente.

Un giro adicional a lo anterior es que he hecho que mis scripts de shell se ejecuten antes de la compilación del proyecto. Esto requiere una configuración manual del proyecto y es una pequeña desventaja, pero el cuadro de diálogo de configuración del proyecto de Visual Studio le permite agregar fácilmente esta línea a cualquier proyecto. El resultado es que los archivos .less se compilan en el lugar deseado como css antes de que se construya el proyecto (y posiblemente se implemente), por lo que tiene todos los archivos necesarios establecidos en su lugar.

Esta es mi configuración si a alguien le interesa:

• En las propiedades del proyecto web en Visual Studio, vaya a la Build Eventssección y coloque esto en el cuadro de texto Preconstruir:

  $(ProjectDir)App_Less\export.$(ConfigurationName).bat &

  Esta práctica implica algunas convenciones que he establecido para mí:

  • El proyecto web tiene una App_Lesscarpeta (la nombré así, puede cambiarla como desee), que contiene algunos archivos bat.
  • Uso una carpeta por tema, y ​​cada una de esas carpetas contiene un archivo raíz theme.lessque hace referencia a todos los demás archivos menos. Una estructura de carpetas de muestra se ve así:
    {ApplicationRoot} App_Less Default// tema predeterminado theme.less export.Debug.bat exprot.Release.bat

  Actualmente estoy usando 2 archivos bat que cambio dependiendo de si construyo localmente (en modo DEBUG) o para producción (en modo RELEASE). Necesito que residan en la carpeta ya mencionada App_Less. Los guiones son los siguientes:

  export.Debug.bat :

  lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css

  export.Release.bat :

  lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css -x

  Ambos scripts generarán el css en el siguiente directorio:
  {ApplicationRoot} Styles Default.css Dependiendo de la configuración de compilación, el Debugmodo mostrará el css en modo "legible por humanos", por lo que puedo solucionar los problemas fácilmente. El Releasemodo renderizará el css minimizado, listo para producción.

• Cada vez que construyo el proyecto, obtengo mis archivos menos compilados en el archivo css deseado automáticamente.

También hay algunos inconvenientes que estoy experimentando con este enfoque. Una desventaja es que algunas construcciones CSS3 válidas que no son reconocidas por el verificador de sintaxis CSS predeterminado de Visual Studio también se subrayarán en los archivos menos. Sin embargo, no tiene problemas visibles con las declaraciones anidadas disponibles solo en less, excepto donde >se usa el token.

IntelliJ IDEA tiene soporte para LESS

CSS

La nueva refactorización Extract Inline CSS ayuda a extraer automáticamente estilos en línea.

Las refactorizaciones Vista previa de imagen y Extraer imagen están disponibles para los atributos data:uri.

MENOS, SASS Y SCSS

Compatibilidad con migas de pan e inspecciones suprimibles para lenguajes LESS, Sass y SCSS.

Más información:

• http://www.jetbrains.com/editors/html_xhtml_css_editor.jsp?ide=idea
• https://stackoverflow.com/questions/8844342/intellij-idea-11-how-can-i-compile-css-from-less

Esta es una recomendación menos basada en la experiencia de lo que normalmente hago, pero de todos modos </advertencia>.

Realmente me gusta SublimeText como un gran editor de texto (en mi opinión, el mejor que he usado, aunque estoy seguro de que podría convertirse en un argumento de opinión con bastante facilidad). No he usado LESS. Sigo pensando en probarlo, pero aún no lo he conseguido. Sin embargo, a pesar de eso, instalé algunos complementos MENOS enfocados para ST; dos o tres de los cuales juntos deben cumplir con todos sus requisitos. Los dos complementos son:

• Less2Css : crea los archivos menos en CSS directamente desde SublimeText. (Tiene algunas opciones, incluida la de hacerlo automáticamente al guardar)
• MENOS : Resaltado de sintaxis y algo de autocompletado.
• Finalizaciones extendidas de CSS: Admite LESS y CSS. Esta es una opción suprema de autocompletar; probablemente lo querrás.

Para repasar sus requisitos:

• Autocompletado de código que admite las construcciones LESS. Idealmente, reconocería los archivos importados e incluiría sus definiciones en las sugerencias de autocompletar : CSS Extended Completions hace eso.
• Resaltado de sintaxis que admite el formato LESS: LESS hace eso.
• Posibilidad de exportar los archivos LESS a un CSS compilado a través de un menú, un botón u otra forma sencilla. En otras palabras, comportamiento similar a una construcción: Less2Css hace eso.
• Preferiblemente para ser una herramienta gratuita (no es necesario): Principalmente Los tres complementos son gratuitos. Sublime tiene una prueba gratuita por tiempo ilimitado.
• Preferiblemente para ser independiente (no para requerir Node.js con npm preinstalado u otro software de terceros que deba ser preinstalado). Para un complemento IDE, estoy bien si el IDE viene con node.js o cualquier otro middleware, el propósito de este punto es evitar la gestión manual de los requisitos previos: a excepción del complemento de compilación Less2Css , no hay requisitos externos. Para el complemento Less2Css , solo tiene que instalar un requisito (lesscs) y hay instrucciones en la página Less2Css en Instalación.