Introducción a Less

Clase 17 de 42 • Curso de Preprocesadores CSS

Contenido del curso

Introducción

Evolución de las Tecnologías de Front-End

Preprocesadores para HTML

Less

Sass

Stylus

Desarrollo del proyecto Platzi Games

Conclusiones y Cierre

42
Conclusiones y Cierre
01:24 min

Tomar examen

Resumen

Less es un preprocesador para CSS que nos permite trabajar hojas de estilo con funcionalidades de un lenguaje de programación.

Comentarios

Moisés Cedeño

student•

En esta clase hay un ligero error, deberíamos utilizar alguna metodología para escribir CSS, por tanto, deberíamos usar el código de está forma:

h1,h2,h3{
	margin: 0;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}

En lugar de:

h1,h2,h3{
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	margin: 0;
}

Recordemos esta clase donde se nos indica en qué forma deberíamos escribir las propiedades para un mejor orden.

https://platzi.com/clases/1665-preprocesadores/22298-guias-para-creacion-y-mantenimiento-de-codigo/

Efraín Hernández García

student•

muy buena observación compañero

Maricruz Pizaña Solano

student•

Muy buen, gracias.

Sergio VO

student•

Si lo quieren ejecutar desde la terminal lo pueden hacer de la siguiente manera:

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

O el navegador: Importarlo al proyecto como cdn

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less" ></script>

Jeferson Velásquez

student•

Gracias, prefiero utilizar la terminal antes que prepos 😃

Oscar Antonio Espinoza Soto

student•

Muchas gracias, desde que aprendi a programar un amigo siempre me aconsejo que todo se puede hacer por la terminal, y es mejor utilizarla que descargar un programa

Nancy Hernandez

student•

El ampersand (&) es un selector en Less que sirve para referenciar la estructura completa hacia arriba, desde donde se utiliza. es un comodín para sustituir el elemento padre (pero no solo el elemento padre, sino el padre con todos sus padres).

Maricruz Pizaña Solano

student•

Gracias por la información.

Addi Alberto Salazar Espinosa

student•

Buen dato! :D

Alessandri Fonseca

student•

Trabajando el with con px nuestra pagina no quedara responsive es mejor utilizar porcentajes

Lautaro Cabral

student•

también los em y rem son valores relativos muy importantes, facilitan mucho el responsive design

Bernardo Aguayo Ortega

student•

oh rem y em

Jorge Cruz Perez

student•

Hay un pequeño error en el archivo .pug que hace que el código html este mal estructurado:

En este post se hace la propuesta de corrección, saludos :)

Franco Nahuel Paez

student•

Gracias!!

Christian Alvarenga

student•

GRACIAS, me estaba dando un dolor de cabeza tratar de arreglar eso.

Angel leon

student•

Si lo quieren ejecutar desde la terminal lo pueden hacer de la siguiente manera:

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

Gerardo Garduño Rosas

student•

Muchas gracias me ha servido bastante el codigo ya que el primero no funciona por que no me reconce el formato less aunque dentro de la crpeta

Efraín Hernández García

student•

Son buenos los preprocesadores, pero no termino de acostumbrarme a ellos. Se me hace todavía más legible usar HTML y CSS puro con buenas practicas

Paulina Nieves

teacher•

Yo utilizo la terminal de VSC. Pra los que tmapoco quieren usar prepos aqui les van los pasos : 1.- Tienen que tener node instalado 2.- Ingresen esto a la terminal npm install -g less 3.- lessc platzigames.less > platzigames.css :)

para mas info -> https://www.tothenew.com/blog/how-to-compile-less-file-into-css-file/

Pedro Moreno

student•

Muchas gracias!

NEXU QUISPE HUAMAN

student•

very much Thank you Paulina¡¡

Jesus Federico David Herrera

student•

Concepto

Less (que significa Leaner Style Sheets) es una extensión de lenguaje compatible con versiones anteriores de CSS. Esta es la documentación oficial de Less, el lenguaje y Less.js, la herramienta JavaScript que convierte sus estilos Less en estilos CSS.

Como Less se parece a CSS, aprenderlo es muy sencillo. Less solo hace algunas adiciones convenientes al lenguaje CSS, que es una de las razones por las que se puede aprender tan rápido.

Primeros pasos

Creamos dos archivos, uno para tener los estilos globales llamado globales.less y luego uno para pagina llamado platzigames.less

globales.less

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: 'Lato', sans-serif;
}

h1,h2,h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin: 0;
}

platzigames.less

@import "globales.css";
.intro {
    width: 1340px;
    height: 650px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    
    // Aca se indica que esa clase esta dentro de intro
    /* .intro__imagen {
        width: 1320px;
        position: absolute;
    } */
    
    // Aca el signo & indica que la primera parte tiene la misma clase  en este caso intro

    &__imagen {
        width: 1320px;
        position: absolute;
        img{
            width: 100%;
            height: 624px;
            object-fit: cover;
        }
    }
}

Daniel Alejandro Romero

student•

Nunca antes había tocado los preprocesadores de css y tu explicación me vino como anillo al dedo

Aaron Joel Limachi Quispe

student•

Utilicé la extensión Hero Compiler para llevar el codigo less a css, también funciona con pug a html.

Sabino Fernández

student•

Excelente!

César Palma

student•

para este curso es la mejor alternativa de vscode a prepros

Cristofher Jumbo Jimenez

student•

Muy bueno less, pero junto con pug como que se crea muchos archivos.

Cristopher Sahagún

student•

Si quieren hacerlo desde la terminal pueden hacerlo instalando:

npm i -g less
npm i -g less-watch-compiler

Y ejecutando:

less-watch-compiler css css

Fuentes: de Ortiz

Kevin Andres Curruchich Xocop

student•

Gracias por el aporte, despues de unos intentos pude compilar less a css con ese paquete de NPM

Dentro de la carpeta del proyecto ejecute el siguiente comando en la terminal

less-watch-compiler ./css ./css

Que esta tomando la carpeta css y guarada en esa misma carpeta

Diego Armando Ramirez Molano

student•

Falto el archivo en ZEPLIN, para explorar, comparar, etc

Platzi Gomez

student•

Si, nunca dio el archivo de ZEPLIN Así uno se limita a copiar y pegar el style sin oportunidad de tomar la iniciativa de poder avanzar para intentar construir solo las cosas.

Con los pequeños detalles se logra la excelencia

RICHARD PEREZ

student•

lo encuentras en la web. https://zeplin.io/

Gonzalo Pimentel

student•

No conocía Zeplin, me ayudará muchísimo en mis proyectos

Addi Alberto Salazar Espinosa

student•

Yo tampoco, muy buena herramienta! :D

Walter Raúl Sánchez Uceda

student•

Sería bueno también que conozcan Figma, es una gran herramienta para diseño.

Jair Neri

student•

Tiene soporte para windows. Por un momento pense que era solo para mac

Roger Carlos Ariel Alba

student•

Si te refieres a Prepros ahora mismos tiene para Windows, Linux y Mac

Jhonny Lincol Quispe Navarro

student•

A mi me gusta mas ejecutarlo por la terminal :)

Platzi Team

student•

Se esta poniendo bueno esto, Genial fantástica clase

Bernardo Aguayo Ortega

student•

viene lo chido

John Edward León Muñoz

student•

Los preprocesadores son una fantastica herramienta para el desarrollo web. A nivel profesional, los equipos de trabajo requieren de estas herramientas, debido al ahorro en tiempo que esto implica, la reutilización del código y la modularización de los componentes.

Maricruz Pizaña Solano

student•

Concuerdo contigo.

Addi Alberto Salazar Espinosa

student•

Asi es! :)

Daniel Esteban Santos Mendez

student•

Tengo una duda que internet aún no me ha resuelto y mi poquita experiencia tampoco, es en realidad necesario aprender los procesadores viendo que css ya tiene muchas de esas características de manera nativa? la pregunt abarca a PostCss.

Aarón González

student•

Siempre estará muy bueno aprenderlos. Para proyectos grandes normalmente te van a pedir conocer de ellos y, si es uno personal, verás que es más eficiente trabajar con ellos pues tienes muchas ventajas como funciones, mixins, y así :D

Daniel Esteban Santos Mendez

student•

Si, pero como CSS ya esta tiene varias cosas nativas que dan los preprocesadores por eso me da mucha duda y si creo que por oferta y aprendizaje esta re bien aprenderlos, la verdad estoy aquí por eso, también practica y puedo aprender algún truquito de más de CSS jeje. Siento que no va a ser muy lejos para que se dejene de usar, digo yo, capaz un presentimiento errado.

Andres Velasquez

student•

Less permite anidar elementos dentro de otros elementos

El caractér: & permite relacionar una clase superior con una inferior

.intro
.intro__imagen

Esto es igual a :

.intro
&__imagen

Ventajas: relacionar las clases que llevan & son hijos de una clases superior, y esto facilita la lectura.

Juan Felipe Gomez Ramirez

student•

Para los que quieran que el archivo se les actualice automáticamente sin usar Prepros. Vayan a la terminal y descarguen este paquete: $npm install -g less-watch-compiler Luego, lo pueden usar de la siguiente manera: $less-watch-compiler [options] <source_dir> <destination_dir> . Fuente: https://www.npmjs.com/package/less-watch-compiler

@import "globales.css";
.intro {
    width: 1340px;
    height: 650px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    
    // Aca se indica que esa clase esta dentro de intro
    /* .intro__imagen {
        width: 1320px;
        position: absolute;
    } */
    
    // Aca el signo & indica que la primera parte tiene la misma clase  en este caso intro

    &__imagen {
        width: 1320px;
        position: absolute;
        img{
            width: 100%;
            height: 624px;
            object-fit: cover;
        }
    }
}

Introducción a Less

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less