Cursos Empresas Blog Live Conf Precios

Tutorial y Reto

Clase 5 de 13 • Curso de Less 2018

Clase anteriorSiguiente clase

Resumen

Vamos a comenzar con los imports de Less.
En esta clase te voy a enseñar a hacer que un solo archivo se compile, pero que este importe todos los otros archivos.
Te muestro además cómo podemos compilar unos archivos específicos debemos usuar el _ (underscore) para que el compilador sepa cuáles son los archivos que se compilan como parte de otros archivos.

Arath Jimenez

student•

Un tip que les puedo pasar es que hagan una carpeta con todos sus archivos fuente, dentro de src, y dentro de esa carpeta crear una subcarpeta llamada less para sus archivos. A su vez para los archivos compilados pueden ir dentro de una carpeta llamada dist. Esta practica les ayudara para cuando aprendan webpack. 😃

Michael Garcia

student•

Con sass no se usa barra baja para llamar el archivo, en less si es necesario

Ramon Duthil

student•

ne corrijo en ambos casos se pueden llamar con el _nombre , pues es para indicar que el archivo no se va a compilar, en ambos casos es igual,lo acabo de probar :)

Gabriel Escribá

student•

P R E P O S S

Daniel Valderrama Mendoza

student•

recuerden el ejemplo de npm

Basic example root └──src │ └── main.less │ └── aux.less └──dist └── main.css The project can be compiled with the following command:

less-watch-compiler src dist main.less

Santiago Ciaponi

student•

Creo que al profe le gusta más sass jajajaja

Cristian Felipe Patiño Cáceres

student•

Eso mismo pensaba jajajjaja :D

Teofilo Rosales Gama

student•

yo uso la UI Koala para windows, is free

Harold David Avila Sabogal

student•

Muchas Gracias

Sebastián Córdoba

student•

Para importar recuerden finalizar con (;) @import "base/_tipografia.less";

Eduardo Reyes

student•

¿Y el reto?

Omar Daniel Centeno

student•

Lo menciona al inicio de la clase:

Hacer la instalación de Less con NPM.
Instalar un watcher.

Muchos compañeros han compartido información valiosa en los comentarios, no olvides pasar a leer :)

Christian Alvarenga

student•

Que es un gulp watcher?

Orlando Manuel Mendoza Vargas

student•

Gulp era (porque ya no se usa mucho) algo muy parecido a Webpack, un module bundler que sirve para compilar y preparar todos tus archivos de desarrollo en archivos comprimidos de producción...

Orlando Manuel Mendoza Vargas

student•

Entonces, "gulp watcher" es como el "webpack watcher", es un observador que lo que hace es estar observando constantemente si hay cambios en los archivos que estén en tu área de desarrollo, para de esta manera compilarlos de manera automática cada vez que se guarde un archivo del entorno de desarrollo

Nelson Neyen Marquez Romero

student•

Hola, hace varios cursos que vengo escuchando el término de "proyecto escalable" pero, ¿Quá significa?

Mauricio Moreno Morales

student•

Que sí por alguna razón quieres aumentar el tamaño de el producto (Agregar más páginas, secciones, funcionalidades etc.) puedas hacerlo sin impedimentos técnicos o con herramientas que faciliten la expansión de el producto.

bruno guerra solano

student•

si compilamos nuestro less o sass desde la linea de comandos podemos hacer que sea minificado ?

Sneyder Barreto

student•

¡Hola! Sí, ambos traen la opción para comprimir el CSS. En Sass se usa el flag --style=compressed y en Less se usa el flag --compressed (aunque en Less recominendan usar una herramienta de terceros para el minificado).

Jhonatan David Ibarra Lavado

student•

sigamos :D

Cristian Felipe Patiño Cáceres

student•

El profe ha cometido un error, la carpeta no debería llamarse scss por que esa es la notación para archivos Sass, mas bien la carpeta se debió llamar less

Guillermo Rosales Núñez

student•

a pesar de que lo metio ahi, dijo que luego tendria que cambiarlo(igual a efectos practicos del curso no afecta) y era provisional xD, pero... supongo que tienes razon y para alguien mas, tal vez un poco mas inexperto, si que podria confundirlo.

Jorge Cruz Perez

student•

Cierto eso mismo había notado, minuto 4:12, se entiende la confusion, pero se supone hay un equipo que detecta este. tipo de fallos, solo eso, saludos :)

Beto Toro

student•

Cuál es la difenrecia de compilarlo con un interfaz gráfica como prepros o codekit vs la terminal, con gulp o webpack?

Angel Joaquín Velasco Gómez

student•

Con base en mi experiencia te puedo decir que lo que mas se usa es webpack, lo configuras para que detecte los cambios y automaticamente compile los archivos, la diferencia no radica en el resultado, mas bien en tu entorno de trabajo, ya que el resultado te puedo casi asegurar que es el mismo.

Jorge Giraldo Guerrero R.

student•

Daniel cual es el arbol de archivos, gracias…

Tomas Salina

student•

Si no me equivoco, en less si hace falta poner la ruta completa al importar.

@import "componentes/_tipografia.less";

Platzi Team

student•

Bien, creo que esto es importante, en proyectos grandes tener separados tus archivos es muy útil y ayuda mucho en los tiempo, para los cambios y cuadrar algún elemento

David Felipe Caicedo Canchon

student•

npm install -g less 
lessc estilos.less estilos.css 

npm install -g less-plugin-clean-css
lessc estilos.less --clean-css="--s1 --advanced --compatibility=ie8"

Jorge Cruz Perez

student•

Un aspecto que afecta la productividad con la versión de compilador grafica es estar cambiando entre ventanas, a lo largo de un proyecto grande o ya insertado en un ritmo de trabajo estos son tiempos que pueden aprovecharse mejor teniendo todo integrado en una sola ventana, saludos :)

Naldo Duran

student•

f