Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Introducción a Less

17/42
Recursos

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

Aportes 45

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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/

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>

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).

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

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 😃

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

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

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

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.

<h3>Primeros pasos</h3>

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;
        }
    }
}

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

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

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

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

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

Se esta poniendo bueno esto, Genial fantástica clase

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.

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

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

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

Si quieres usar tus conocimientos en webpack para darle vida a este proyecto, este es tu tutorial
https://www.youtube.com/results?search_query=sass+handlebars+webpack

que cheveré carajooo

Actualmente css tiene la funcionalidad de import exactamente igual que en less

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.

LESS permite anidar clases dentro de su archivo para simplificar código.

interesante lless

que bien se ve el codigo de less. al parecer CSS hara las anidaciones nativas dentro de poco

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

A diferencia de Pug a Less ya le encontré el ánimo de su uso desde la primera clase

Hola, quien desee usar la consola para compilar el codigo de less les dejo aca este link para poder usar less-watch-compiler, les ayudara a compilar cada vez que hagan cambios en el documento:)

https://www.npmjs.com/package/less-watch-compiler

La primeras clases para mi siempre son las mas dificiles 🙄😴 todo el proceso de poder instalar el npm y procesarlo por la terminal suele ser un reto cuando tu internet es asqueroso y n tienes una guía per se. Pero se logró y acá seguimos.

Import y anidamiento en Less

Lo que se ha hecho hasta ahora es utilizar la propiedad de @import y los anidamientos en Less.
.
IMPORT: Esto se usa solo para importar el código que esta en otro archivo. Se utiliza con @import mas la dirección del archivo

@import directory/file.less

.
ANIDAMIENTO: Este se usa como en html, en donde ponemos una etiqueta dentro de la otra, la principal diferencia hasta ahora es que usando el signo &, podemos hacer referencia al elemento padre. El de abajo es el archivo less

.block{
  // CSS code

  &__element{
    //code    
  }
}

Cuando se compile, el archivo CSS va a estar de la siguiente manera

.block{
  // CSS code
}
.block__element{
  //code
}

DEFINICION SEGUN WIKIPEDIA:
Less (a veces estilizado como LESS) es un dinámico lenguaje de hojas de estilo que puede ser compilado en hojas de estilo en cascada (CSS) y ejecutarse en el lado del cliente o en el lado del servidor. Diseñado por Alexis Sellier. Está influenciado por Sass y ha influido en la nueva sintaxis “SCSS” de Sass, que adaptó su sintaxis de formato de bloque similar al de CSS.2​ LESS es de código abierto. Su primera versión fue escrita en Ruby, sin embargo, en las versiones posteriores, se abandonó el uso de Ruby y se lo sustituyó por JavaScript. La sintaxis indentada de Less es un metalenguaje anidado, lo que es válido en CSS es válido en SCSS con la misma semántica. LESS proporciona los siguientes mecanismos: variables, anidamiento, operadores, mixins y funciones.

Nitido

¿Por qué no es bueno ordenar las propiedades por orden alfabético?

Prepos es de mucha utilidad.

Excelente el anidamiento, ayuda a entender mucho más el código css y a escribir un poco menos.

Haber, convenceme Less!

Woow que impresionante las anidaciones

Aprendiendo algo nuevo, vamos bien! 😄

Se me hace un poco más complejo, pero el código queda “mejor estructurado”

A aprender Less!.

me esta gustando los anidamientos en less, es interesante y si lo combinas con BEM creo que si hace mas agil el proyecto.

Me parece que para comenzar utilizando pug y algún preprocesador desde el inicio se puede hacer un poco complejo para algunos.

Buen conocimiento

@import "globales.less";
.intro {
  width: 1340px;
  height: 650px;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

.intro__imagen {
  width: 1320px;
  position: absolute;
  img {
    width: 100%;
    height: 624px;
    object-fit: cover;
  }
}```

b