Anidamiento e imports

Bracket Pair Colorizer, es una extensión muy buena para VScode para darle color a los {} e identificar donde comienzan y terminan 😉

Wow, less me ha sorprendido, pues es una nueva forma de trabajar CSS de forma mucho más ordenada, en la cual podemos reutilizar estilos por trabajar de forma modular. facilitando mucho mas el trabajo tanto para mi como para otras personas que deseen leer mi código.

Al usar el git-ignore ignoro todos los archivos pug y less y en mí github queda subido como un html y un css normal.

muy interesante Less y todos los preprocesadores de CSS, antes les tenia miedo porque los veia medio complicados pero ahora que estoy viendo este curso veo que por miedo estaba haciendo al modo mas complicado!

Si quieren compilar less desde la consola corran el comando:

npm install -g less

y luego adentro de la carpeta css corran el comando

lessc platzigames.less styles.css

Ahí les crea un archivo styles.css compilando el código less que haya. Suerte!

Me encanta trabajar de forma modular es más fácil encontrar las cosas

mis notas:

se ven casi todas mis notas excepto en la sección de conceptos nuevos:
@import: sirven para segmentar nuestro archivo less

Siempre cuando inspeccionaba una pagina me pregunta por que salia así o por que no estaba organizado, ya voy entiendo, gran clase

CSS con esteroides B)

Solamente tengo una observación: en los cursos Definitivo y Práctico de HTML y CSS se nos enseña a definir el font-size a 62.5% para tenerlo por defecto en 10px para luego usarlo con unidades rem, ejemplo: 1.6rem para 16 pixeles, todo esto por buenas prácticas. Sin embargo, aquí volvemos a especificar el font-size en pixeles. Deberían estandarizar todos estos detalles.

Anidamiento e imports

Creamos un archivo nuevo que contentra el estilo del intro, llamado intros.less

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

    &__contenido{
        width: 50%;
        margin: 0 auto;
        position:absolute;
        top:156px;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
    }
    &__categoria{
        font-family: 'Oswald',sans-serif;
        text-transform: uppercase;
    }

    &__titulo{
        font-family: 'Oswald',sans-serif;
        text-transform: uppercase;
        font-size: 50px;
    }

    &__autor{
        width: 150px;
        margin: 0 auto;
        position: absolute;
        top: 400px;
        left:0;
        right: 0;
        color: white;
        img{
            width: 60px;
            height: 50px;
            float: left;
            padding-right: 10px;
            border-radius: 10em;
        }
        span{
            display: inline-block;
        }
    }
}

Nuestro archivo platzigames.less

@import "globales.css";
@import "intros.css";

Super practico y se nota la experiencia, me encantó la lección

En Less el carácter “&” tiene la función de la palabra clave “this”, por lo que es posible escribir:

.class1 {
    &.class2 {}
}

Por tanto, el archivo compilado de CSS generará un código como el siguiente:

.class1.class2 {}

La imagen de avatar, se ve un poco deformada, haciendo estos ajustes se ver redonda perfecta como en el diseño:

img {
	width: 50px;
	height: 50px;
	float: left;
	margin-right: 10px;
	border-radius: 10em;
}

Ojo con el punto y coma

Me gusto mucho este método

En mi caso cambien estos valores en la imagen del autor,
porque no se miraba bien.

img{
 width: 50px;
 height: 50px;
 float: left;
 margin-right: 10px;
 border-radius: 50%;
 }

Para no tener que usar el comando…

lessc platzigames.less styles.css

cada que se quiere compilar el archivo less desde la terminal, se puede instalar la extensión easy less de VSCode, que compila el archivo tras guardar el archivo .less.

supeeer que bieeen 😄

Wuao me esta gustando esto así tienes todo las secciones dividas y cuando quieras hacer un cambio accedes directamente a la sección… de igual manera cuando quieras hacer un nuevo proyecto y encuentras secciones similares puedes guiarte de las secciones que ya tienes de otros proyectos!

Mini-Aporte:

Para centrar un elemento eje x

left:0;
right:0;

el profe explica muy bien, pero me parece que las medidas que puso no fueron las mejores y hubo en cierto momentos rebundancia de css

indent-rainbow y Bracket Pair Colorizer Son dos extensiones de VS code que ayudan mucho con la indentacion y el anidamiento.

De las ventajas que veo hasta ahora en less, es que podemos saber a que hijo pertenece un elemento, sin embargo, creo que sigue siendo el mismo código (las mismas lineas de codigo), veamos si este disminuye con el paso de las clases

less > sass

super interesante el concepto de anidados

Miro esta clase & la anterior tratando de no pensar en los enormes bugs de Cyperpunk 2077. 😂

De todos modos se puede usar display flex para alinear o grid, pero no se si mas adelante comienza a usar ese tipo de propiedades

Usen Color highlight para remarcar el color en sus variables

Wowww , excelente me emociona trabajar mas aun , todo se lleva mas ordenado con pre-procesadores, recuerdo que cada vez que usaba CSS antes para un proyecto ese archivo enorme de css con 500 lineas de codigo o mas.

La organizacion sobre todo.

Es un buen metodo.

Todo se ve mas ordenado, mas limpio y mas practico.

Incluso es mas facil asi identificar y resolver el problema de una manera mas organizada. ME GUSTA !

Wow esto se pone interesante.

Es es como un CSS con poderes!

Trabajar de forma modular, se ve super practico

Estaría bien que a medida que finaliza la sección muestre los cambios generados

Que buena clase
Me quedo con estos métodos de preprosesadores

Muy practico, me gusto esta clase.

Me gusta que el código se ve más limpio, pero no acabo de convencerme al 100. 😦
Excelente clase por cierto.

Vamos bien! 😄

con pug me pareció interesante pero no creo que lo use en mis proyectos personales. Creo que alguno de los preprocesadores de CSS si voy a usar, solo al finalizar sabre cual.
lo de ver el código y saber que estamos dando estilos a la sección intro siempre he puesto comentarios en mi css para saber que parte estoy trabajando.

al trabajar con less se mejora mucho la estructura del codigo y se puede leer y entender mejor

es buena idea estructurar bien los nombres nos permiten usar el anidamiento y hacer mas legible nuestra pagina tambien haciendo import podemos verificar solo el componente y no todo el codigo como seria en css

Super

Al trabajar con LESS podemos anidar todo usando “&” y así logramos una mejor vista de nuestro código, en este ejemplo, todo está dentro del bloque .intro

.intro {
  width: 1340px;
  height: 650px;
  padding: 10px;
  margin: 0 auto;
  position: relative;
  &__imagen {
    width: 1320px;
    position: absolute;
    img {
      width: 100%;
      height: 624px;
      object-fit: cover;
    }
  }
  &__contenido {
    width: 50%;
    margin: 0 auto;
    position: absolute;
    top: 156px;
    left: 0;
    right: 0;
    text-align: center;
    color: aliceblue;
  }
  &__categoria {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
  }
  &__titulo {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 50px;
  }
  &__autor {
    width: 150px;
    margin: 0 auto;
    position: absolute;
    top: 400px;
    left: 0;
    right: 0;
    color: aliceblue;
    img {
      width: 60px;
      height: 50px;
      float: left;
      padding-right: 10px;
      border-radius: 10em;
    }
    span {
      display: inline-block;
    }
  }

}```

Y llamamos a nuestro codigo en uno archivo con @import asi:

@import “globales.less”;
@import “intros.less”;

Increíble como se se ahorran lineas de código con los módulos.

Para para no repetir propiedades en las clases &__categoria y &__titulo no seria mejor asi?

    &__categoria, &__titulo{
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
    }
    &__titulo {
        font-size: 50px;
    }