Anidamiento e imports

Clase 18 de 42 • Curso de Preprocesadores CSS

Karla

student•

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

Jesus Manuel Hernandez Diaz

student•

Si totalmente, mi vida cambio cuando la descubri jajaja

Efraín Hernández García

student•

Lo acabo de instalar y me ayudó muchísimo!

Carlos Roberto Villatoro Barrios

student•

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.

Maricruz Pizaña Solano

student•

Concuerdo totalmente contigo, también estoy muy sorprendida.

Bernardo Aguayo Ortega

student•

de acuerdo!

Daniel Azocar

student•

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!

Christian Velázquez

student•

Pienso igual. Ahora, me surge la pregunta sobre si me ayudará en trabajos que tenga que utilizar React.

Diego Andres Cardenas Caro

student•

Chistian, cuando trabajas con React puedes utilizar cualquier metodologia para integrar el CSS puro, con BEM, atomico, con preprocesadores, CSS en JS o todo combinado, todo depende de como organices tu codigo. Pug por otro lado no lo vas a poder usar con React ya que React trae su propio sistema JSX para el html.

Alejo Vera

student•

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!

Maricruz Pizaña Solano

student•

Gracias por el aporte. :D

Addi Alberto Salazar Espinosa

student•

Buen dato! :)

Stiven Jiménez

student•

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

Addi Alberto Salazar Espinosa

student•

De acuerdo contigo! :D

Bernardo Aguayo Ortega

student•

José Iván Ballín González

student•

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.

Omar Quiroz

student•

estimado José Iván, entiendo tu sentir. Incluso se habla de usar HTML semántico a pesar de que la mayoría de las páginas web están inundadas de DIVS.

Pero debes formar tu criterio, cuando balancear el uso de estilos globales como los enseñados anteriormente y cuando usar otros criterios.

Recuerda que cuando nos integremos a un equipo de trabajo nos tendremos que adaptar a su forma de trabajo.

Jesus Federico David Herrera

student•

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

Anfernee Valera

student•

CSS con esteroides B)

Daniel Alejandro Romero

student•

mis notas:

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

Platzi Team

student•

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

Armando Chindoy

student•

Alguien sabe si los archivos de los preprocesadores se mantienen en el repo de producion o se ignoran con el .gitignore?

Efraín Hernández García

student•

Se mantienen. Ambos tanto el del preprosesador como el código nativo al que se compiló

Danilo Fernandez

student•

Tenia la misma duda, como trabajarlos con git.

César Velandia

student•

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.

Omar Quiroz

student•

esta muy bien tu aporte. solo tengo una pregunta. ¿esta extensión de VS Code te indica los errores al compilar?

Carlos Enrique Rojas Falcone

student•

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

Kevin Parra Lopez

student•

Ojo con el punto y coma

Me gusto mucho este método

Diego Alfonso Najera Ortiz

student•

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

Max Felipe Hess Alvarez

student•

Tenia la duda de por que le pone denuevo el font famiy y el text transform si ya hizo eso en el global si alguien me explica

Christian Beltran

student•

Hola, tengo una duda, el profe hace uso de &__titulo y &__categoria al mismo nivel de indentación de &contenido. ¿No se debería realizar la indentación de forma correcta? Sé que se ponen al mismo nivel para poder hacer uso de la abreviatura &. ¿En este caso no afecta la especificidad, pero en proyectos realmente grandes esto no puede llegar a generar problemas en la especificidad de los estilos CSS?

Max Felipe Hess Alvarez

student•

No se mucho de less pero segun lo que veo lo puso a ese nivel sin identacion ya que las clases tienen el bloque "intro" entonces deben estar a nivel de ese bloque para usar la abreviacion con "&" en cuyo caso no seria viable si lo anidamos mas supongo pero igualmente no se ve tan ordenado

Irving Juárez

student•

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

Raúl Adolfo Sánchez Rodríguez

student•

Si quieres leer más sobre la propiedad float te dejo el siguiente enlace: float

Nelson Gonzalez Escalante

student•

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

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

Anidamiento e imports

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

Introducción a Less