¿Cómo utilizar LESS CSS compiler?

imagen / pythonizame
  
22 de Octubre de 2015   0  

Para los programadores Web el estilo de un sitio lo dice todo, puedes utilizar para crear tu estilo CSS o LESS que es una ampliación de las hojas de estilos convencionales.

LESS es un lenguaje extendido de Css que nos permite utilizar características que en CSS puro no se puede, por ejemplo, en Less puedes utilizar funciones, variables, cáculos, manejo de jerarquías de nodos, etc.

Muchos pogramadores FrontEnd utilizamos LESS, SASS, STYLUS, etc, y sabemos  que todos pueden generar una versión compilada de CSS puro, lo que significa que "codificas" en LESS y presentas con CSS.

El uso de este tipo de tecnologías ha llegado a ser sumamente necesario para agilizar el proceso de maquetación y para obtener un código más legible y por supuesto mantenible. 

Existen muchas maneras de compilar este tipo de scripts para que nos genere una versión de CSS minificada, entre ellas está "LESS CSS Compiler" que es un plugin de pycharm que nos hará la tarea mucho mas fácil de lo que pensabamos.

Hoy les traigo un minitutorial de cómo instalarlo.

 

1. Instalación

 

 

Desde pycharm nos dirigimos a "Preferences..." . Estando en esta ventana nos dirigimos a la sección de "Plugins" y hacemos clic el botón "Browse repositories..." (como se muestra en la siguiente imagen)

 

 

Estando en la ventana "Browse Repositories" hacemos la búsqueda del plugin "LESS CSS Compiler" y hacemos clic en el botón verde que está situado a la derecha con la leyenda "Install plugin".

 

 

Seguido de esto reiniciamos el IDE para que encontremos al plugin instalado.

 

2. Creando un Perfil LESS

 

Ahora que ya tenemos instalado el plugin haremos uso de él de la siguiente manera:

En el menú de Pycharm nos dirigimos a "Preferences..." y seguidamente a Other Settings/LESS Profiles.

 

 

Para agregar un nuevo perfil haremos clic en el ícono "+" y escribiremos el nombre que querramos ponerle al perfil, puede ser pythonízame, mi_sitio, etc. El nombre solamente es un identificador. En mi caso ya contaba con el perfil de pythonizame y creé uno nuevo llamado "ejemplo_pythonízame" (dando gala de mi gran creatividad). 

 

 

Teniendo un nuevo perfil ahora nos disponemos a llenar la configuración necesaria. 

LESS source directory: Se refiere a la carpeta en donde se tienen los archivos "*.less"

**Este plugin te da la opción tambien de excluir archivos por path.

CSS Output Directory: Se refiere a la carpeta donde queremos que se generen los archivos CSS, para ello haremos clic en el botón "+" y seleccionaremos la ruta deseada.

Por último tenemos algunas configuraciones extras en la parte de abajo. Una de ellas es la opción de compilar automáticamente cada vez que se haga un "save" al archivo LESS, por lo general esta opción viene habilitada.

Otra configuración super interesante que nos da este plugin es el de seleccionar si queremos que los CSS generados estén o no minificados. Esta última opción nos permite obtener un archivo que pesa mucho menos y con eso permite que la carga de nuestros sitios web sea mas rápida.

Su pantalla de configuración debe de quedar mas o menos de la siguiente manera:

 

 

Con esto ya tendríamos configurado nuestro compilador de Less que nos ayudará a que se generen automáticamente los archivos CSS generados de uno tipo LESS.  Todos los archivos LESS que generemos generarán por consiguiente un archivo CSS compilado, a menos que necesitemos excluir alguno.

 

Espero que les haya gustado este mini tutorial y que se animen a utilizar LESS o algún otro como Stylus y Sass.

Si me preguntan cual de ellos es mejor, solo les puedo decir que prueben los tres y que se queden con el que más se acomoden, los tres tienen casi las mismas características.

Recuerda, si usas CSS está muy bien, pero si lo usas aumentándole super poderes está aun mejor ;)



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados