Trabajar eficazmente con LESS Tips y herramientas

En nuestro tutorial anterior, hemos aprendido cómo usar MENOS de una manera práctica utilizando aplicaciones como ChrunchApp para compilar el código. En esta ocasión, veremos algunos consejos prácticos que podrán aumentar nuestro rendimiento y productividad al compilar la sintaxis LESS. Vamos a configurar nuestro escritorio / entorno de trabajo habilitando el resaltado de sintaxis para nuestro editor actual, usando herramientas de compilación automáticas y utilizando Mixins predefinidos, luego los sincronizaremos todos juntos.

Bueno, si estás listo, vamos a empezar.

Renuncia: Los consejos que se explican a continuación se derivan de mis experiencias diarias como diseñador web. Por lo tanto, antes de seguir adelante, quiero resumir que los consejos pueden ser adecuados para algunos diseñadores y no para otros; Al igual que cualquier otro consejo que encuentre en la Web. No obstante, espero que pueda obtener algo útil de los siguientes consejos.

1. Resaltador de código

Como mencionamos anteriormente, le presentamos ChrunchApp. Sin embargo, esta aplicación podría no ser la preferencia de todos los diseñadores web; porque cada diseñador tiene su propio entorno de trabajo, incluido el editor de código de su elección.

En lugar de instalar otro editor de código, aún puede usar el actual y habilitar el resaltado de sintaxis en él. Entonces, en esta publicación, compartiré algunos consejos para agregar MENOS resaltados en 2 editores de texto famosos: Texto sublime 2 y Bloc++.

Texto sublime 2

Este editor es actualmente mi opción preferida para ayudarme a redactar códigos. Esta aplicación está disponible para Windows, Linux y OSX, por lo que, independientemente de su sistema operativo, podrá seguir este consejo..

Ahora, descarguémoslo de su sitio web oficial y probemos este editor. Luego, lea las siguientes instrucciones para habilitar MENOS resaltado de color en él..

Nota: Asegúrese de haber leído la licencia antes de descargarla, ya que la versión gratuita solo está destinada para evaluación.

Instalar el paquete de consola

Primero, abra su Sublime Text 2 y visualice la consola desde este menú Ver> Mostrar consola

Luego, copie y pegue la siguiente línea de comando en la Consola, luego presione Enter para instalar el control de paquetes desde wBond.net:

importar urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) si no es os.path.exists (ipp) else Ninguno; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); abrir (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). leer (); imprimir 'Reinicie el texto sublime para finalizar la instalación'

Esta Consola de paquetes nos ayudará a instalar el paquete-resaltado.

Instalación del paquete de MENOS resaltado

Reinicie el texto sublime 2 y muestre la paleta de comandos desde este menú Herramientas> Command Palette. Espere hasta que la lista de paquetes se haya cargado. A continuación, escriba Paquete de instalación para buscar y cargar repositorios de paquetes.

Luego, busque el paquete LESS en la lista de repositorios y presione Enter.

Espere un minuto para que Sublime Text 2 descargue e instale el paquete hasta que aparezca la siguiente notificación en la barra de estado.

Ir al menu Ver> Sintaxis, Debería ver MENOS en la lista. Significa que el Sublime Text 2 está apoyando .Menos y su sintaxis LESS también debería tener un color de resaltado adecuado ahora.

Bloc++

Notepad ++ es un editor gratuito de código de código abierto, y tiene muchos complementos útiles para ampliar su funcionalidad. También es ampliamente utilizado por muchos diseñadores / desarrolladores web, especialmente aquellos que trabajan con el sistema operativo Windows. Por lo tanto, decido incluir también la sugerencia para agregar MENOS resaltado de texto para ella.

Instalar LESS-highlight en el Bloc de notas++

Habilitar el resaltado de color MENOS en Notepad ++ es bastante fácil.

Primero descargue el paquete LESS para Notepad ++ desde este enlace (userDefineLang_LESS.xml). Luego ve a Ver> Diálogo definido por el usuario.

Aparecerá el siguiente cuadro emergente a continuación. Haga clic en el Importar… botón y localizar su descargado .xml expediente. Luego, reinicie el Bloc de notas++.

Abra su archivo .less y vaya al menú Idioma. Ahora debería ver MENOS incluidos. Selecciónelo para aplicar resaltado de color en su sintaxis de MENOS.

Más recursos

Hay muchos otros editores en el mercado. Por lo tanto, aquí incluimos algunos enlaces útiles para usted si no utiliza ninguno de los editores anteriores..

Adobe Dreamweaver

Sin lugar a dudas, Dreamweaver tiene una enorme base de usuarios. Está disponible para Mac y Windows. Por lo tanto, si usa este editor, aquí tiene una buena fuente para instalar MENOS puntos destacados en Adobe DreamWeaver.

Coda

Si está utilizando Mac, probablemente conozca Coda, este editor es uno de los más populares entre los usuarios de Mac. Y, aquí es cómo puede instalar MENOS en Coda.

Geany

Es uno de los editores de código más populares entre los usuarios de Linux. Algunas computadoras en mi oficina que funcionan con Linux también usan Geany. Entonces, si también lo usa, puede incluir MENOS puntos destacados siguiendo estas instrucciones en SuperUser.com

2. MENOS compilador

A diferencia de ChrunchApp que tiene un compilador LESS incorporado, los otros editores no lo tendrán por defecto. Aunque hay algunas formas de incluirlo, es bastante técnico para los usuarios generales. Entonces, la mejor solución que tengo es hacer la compilación usando las siguientes herramientas: WinLESS o MENOS.app. WinLESS es un compilador diseñado para Windows, mientras que LESS.app está diseñado para OSX.

Estas herramientas pueden convertir nuestro código MENOS en un CSS estático automáticamente a medida que guardamos el archivo e informamos directamente si hay un error en el código. Bueno, déjame mostrarte cuánta es esta herramienta:

Primero, me gustaría descargar WinLESS e instalarlo.

Haga clic en el botón Agregar carpeta y localice el directorio donde colocó su .Menos archivos (supongo que ya ha creado al menos uno). Una vez que agregues uno; WinLESS escaneará y encontrará todos .Menos archivos y te muestran en la lista.

Ir al menu Archivo> Configuración, y asegúrese de que estas opciones estén marcadas;

Compilar automáticamente los archivos cuando se guardan
Mostrar mensaje en compilación exitosa

También podemos configurar la carpeta de salida, en caso de que queramos guardarla en otro lugar. Pero, en este ejemplo dejaremos esta opción como está; lo que significa que el archivo de salida se guardará en el mismo directorio que el .Menos expediente.

Abre tu .Menos desde el directorio agregado, realice algunos cambios y guárdelo.

WinLESS le notificará cuando el archivo se haya compilado correctamente en .css O si hay un error en los códigos. De esta manera, puede verificar la salida de .css directamente, en lugar de tener que esperar a que los códigos se completen para compilarlo..

Si está usando Mac, puede usar LESS.app que tiene la misma funcionalidad que WinLESS.

Mixins preestablecidos

En las prácticas actuales de diseño web moderno, usaremos propiedades CSS3 como Gradient, Shadow o Border Radius que se ven así:

-webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px;

fondo: -moz-lineal-gradiente (arriba, # f0f9ff 0%, # a1dbff 100%); fondo: -webkit-linear-gradient (arriba, # f0f9ff 0%, # a1dbff 100%); fondo: -o-lineal-gradiente (arriba, # f0f9ff 0%, # a1dbff 100%); fondo: -ms-lineal-gradiente (arriba, # f0f9ff 0%, # a1dbff 100%); fondo: gradiente lineal (arriba, # f0f9ff 0%, # a1dbff 100%);

En nuestro tutorial anterior hemos hecho algunos Mixins para simplificar esta sintaxis. Afortunadamente, algunas personas en la comunidad de diseño web son lo suficientemente generosas como para ahorrar su tiempo para compilar estos Mixins útiles, de modo que no necesitamos compilarlos nosotros mismos desde cero.

Y, uno de mis favoritos es Menos elementos que contiene muchas reglas predefinidas de CSS3 útiles. Por lo tanto, ahora escribimos menos líneas de código a partir de prefijos de proveedores tediosos.

Bien, ahora, veamos cómo todos estos consejos anteriores realmente pueden ayudar..

Poniéndolos todos juntos

En este ejemplo voy a crear un simple botón de enlace. Primero me gustaría crear un nuevo documento HTML y poner el siguiente marcado:

 MENOS    Haz click en mi

Crear un styles.less como nuestra hoja de estilo LESS principal, guárdela en la misma carpeta con nuestro documento HTML y agregue la carpeta a WinLESS.

Importar el Elements.less hemos descargado antes de usar esta sintaxis:

@import "elements.less";

Ahora, podemos usar cualquier Mixins provisto desde elements.less como .gradiente, .redondeado, y .bordeado. Estoy seguro de que el nombre de Mixins se explica por sí mismo..

A continuación, ponga las reglas MENOS a continuación, en su hoja de estilo. Y, guárdalo una vez más.

 a display: inline-block; relleno: 10px 20px; color: # 555; texto-decoración: ninguno; .bw-gradient (#eee, 240, 255); .redondeado; .bordado; &: hover .bw-gradient (#eee, 255, 240);

Desde nuestra .Menos archivo se ha agregado a WinLESS, se compilará automáticamente en .css. Ahora veamos los resultados..

Bueno, no es tan malo, no es así, teniendo en cuenta que este botón se creó con menos líneas de las que se necesitaban. Y, aquí está el CSS estático generado real:

 a display: inline-block; relleno: 10px 20px; color: # 555; texto-decoración: ninguno; fondo: #eeeeee; fondo: -webkit-gradient (lineal, izquierda inferior, superior izquierda, color-stop (0, # f0f0f0), color-stop (1, #ffffff)); fondo: -ms-lineal-gradiente (abajo, # f0f0f0 0%, # f0f0f0 100%); fondo: -moz-linear-gradient (parte inferior central, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; radio del borde: 2px; -moz-background-clip: relleno; -webkit-background-clip: padding-box; clip de fondo: caja de relleno; borde superior: sólido 1px #eeeeee; borde izquierdo: sólido 1px #eeeeee; borde derecho: sólido 1px #eeeeee; borde inferior: sólido 1px #eeeeee;  a: hover background: #eeeeee; fondo: -webkit-gradiente (lineal, izquierda inferior, superior izquierda, color-stop (0, #ffffff), color-stop (1, # f0f0f0)); fondo: -ms-lineal-gradiente (parte inferior, #ffffff 0%, #ffffff 100%); fondo: -moz-linear-gradient (parte inferior central, #ffffff 0%, # f0f0f0 100%);

En resumen

Aquí hay un breve resumen de lo que hemos discutido en esta publicación:

Al habilitar el resaltado de sintaxis en nuestro editor actual, no necesitamos instalar un editor adicional solo para componer la sintaxis LESS; Esto puede ahorrarle algunos espacios / memoria en su disco.
Tampoco necesitamos descargar y vincular la Biblioteca LESS.js en nuestra sección de encabezados HTML como lo hicimos en nuestro último tutorial. De esta manera, nuestro documento HTML permanece limpio y ordenado..
El uso de herramientas de compilación como WinLESS y LESS.app puede generar la salida CSS estática al instante. Entonces, si hay algo mal con la sintaxis, podemos examinarla de inmediato.
Presets Mixins como LESS Elements es nuestro mejor amigo. Realmente puede ahorrar nuestro tiempo al compilar la tediosa propiedad CSS3.