Extend

Resumen

He hecho una actualización que vamos a usar en HTML. En este documento hemos hecho algunos cambios en el código que nos ayudan a manipularlo usando nuestro preprocesador Sass.

Hernán Arica

student•

me parece malisimo que hables de git o que entregues el proyecto asi como asi sin hacerlo con la gente! en lo personal safe por que se git y entiendo esto pero creo que el que reien empieza se pierde con esto... floja la clase...

JORGE ARTURO SARRIA COBO

student•

Adicional el Archivo de en GIT en su formato no corresponde al que se muestra en el video

Guillermo Rosales Núñez

student•

Concuerdo en cierta forma, no estoy en contra de que pongan la opcion de clonar un repositorio para los que sabemos, pero es cierto que algunos no sabran como hacer(en cuyo caso les recomiendo tomar el curso de git y github antes de toda la ruta ya que es super esencial) pero... dejando eso de lado, en teoria llevamos un hilo de aprendizaje con lo que llevamos de "proyecto" o ejemplo, y de la nada me dice que agrego 800lineas de codigo, clases, propiedades y los extends.... la explicacion de los extends termina siendo de 2 minutos.... pero la clase de 11, logre entender gracias a que habia leido algo de documentacion Sass y visto el curso de "preprocesadores" que les recomiendo tomar para complementar este conocimiento, tal vez pudieron presentarlo de una mejor manera sin sacarnos de contexto(o del hilo que llevabamos):D, igual los comentarios son con animo de mejorar el aprendizaje de los demas y futuros cursos uwu, no con mala intencion de queja. igual, buen curso :D.

Igual les dejo este link por si quieren leer algo de la documentacion y aprender un poco mas

Sass: @extend

Sergio Toshio Minei

student•

Extend

Permiten que una declaración herede estilos declarados por otra regla o placeholder. Los extend se declaran con el símbolo de porcentaje %.

%btn {
  color: red;
  width: 50px;
}

.btn-info {
  @extend %btn;
  background: blue;
}

Pueden ver el resumen completo del curso aquí

Emerson Cedeño

student•

me parece que aquí cabe hacer una aclaración en relación al uso del %, el cual se utiliza para declarar placeholders, mismos (los placeholders) que tanto como demás selectores CSS pueden ser extendidos (heredados?) en otra regla mediante el uso de la sentencia extend … correcto?

Irving Sarmiento

student•

🤔 Mas bien, creo que los placeholder se declaran con el símbolo %

Sebastian Marin

student•

Esta un poco enredado el curso.... nos saltamos mucho de una clase a la otra. Pero bueno sigo aprendiendo

Fabricio Micheli

student•

Estuve pensando y quise conocer la diferencia práctica entre usar un @mixin y la directiva @extend y encontré algo interesante:

“Como regla general se puede decir: cada vez que utilices @mixin sin parámetros, un @extend será más eficiente. Por supuesto, hay excepciones, pero es una regla general.”

¿Qué opinan de ello? ¿parece una regla coherente?

Harold David Avila Sabogal

student•

Buena información

Daniel Esteves

student•

De hecho es la regla más exacta que puedes seguir, tu código se va a ver mucho mejor y estarías prácticamente utilizando buenas prácticas

Oscar Jesus Resendiz Mendoza

student•

Hasta aquí termino el curso, esta en mi top 3 de los peores.

Stiven Jiménez

student•

yo no creo que sea malo, solo que va un poco lento y esto debe ser por que esta dirigido a los novatos ...

MATTHEUV OSORIO CARDONA

student•

Yo entendi con más claridad aqui Sass que en el curso de todos los preprocesadores..

Angel Esteban Castillo Candia

student•

Sólo por compartir. Yo me pregunté, entonces qué me conviene utilizar, mixin o herencia?

La respuesta es: siempre que pueda utilizar herencia (con extend) en vez de mixins (con include), debemos hacerlo!

**–>**La razón es que no estoy duplicando código en cada selector (caso de los mixin), sino que se crea una agrupación de selectores con el código compartido para todos 1 sola vez

Ahora bien, entonces cuándo utilizar mixin?

La respuesta es: cuando sean necesario el uso de parámetros en el mixin. Es una función única en ellos y no puede ser reemplazada.

Fuente: Revisa aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte que buena información

JORGE ARTURO SARRIA COBO

student•

Todo iba bien, hasta que actualice la version que coloco en GitHub y no corresponde a lo que muestra en el video de esta clase, la verdad daño el curso con ese detalle

Eddy Arellanes

student•

Aquí está el Repo, lo que veo es que lo separó en ramas según el tema, por eso si entran en el master sólo está el commit de la clase 1

Jose Chirinos

student•

Exacto en la rama que inicia es: Directivas-de-control-de-flujo

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Joel Bello

student•

Que flojo!! , le costó mucho llevar el proyecto con el curso.

Luis Alejandro Vera Hernandez

student•

Ya como se necesita una actualizacion de este curso no?

Korpi delfin

student•

¡Hola!

Gracias por tu feedback, lo pasaré al área correspondiente. Te recomiendo tomes el Curso de Preprocesadores CSS :D

Luis Alejandro Vera Hernandez

student•

Hola @korppii, gracias por tomar en cuenta no sugerencia.

Si, precisamente vengo del Curso de Preprocesadores CSS y se siente la diferencia.

Solo que pensaba que al como estar el curso de SASS despues de este otro en mi ruta pensaba que iba a ser mejor

Carlos Santaniello

student•

Pregunta de examen: Si añado un extend dentro de dos selectores ¿cuántas veces se compilan en css sus propiedades? (8:01)

Nixon Fernando Ortiz Suarez

student•

Esta parte me ha dejado un poco confundido, esto debido a los pequeños cambios.

Josue Daniel Paz Gómez

student•

Que mal colocar de esa manera el proyecto iba todo bien hasta este momento!!

Juan C Felizzola

student•

Estuve consultando un poco de placeholders para Stylus:

Stylus tiene una función similar a la de Sass: selectores de marcador de posición. Esos selectores deberían comenzar con un símbolo $ (por ejemplo, $ foo), y no se producen en el CSS resultante.

Referencia:

Daniel Muñoz Martín

student•

No conocía esta propiedad y me parece una opción muy interesante para ahorrar código, muchas gracias tocayo 😉

Harold David Avila Sabogal

student•

buena clase

Eddy Arellanes

student•

El Extend me recuerda las Interfaces en Programación orientada a objetos

Wilson Marino Pablo Mendez

student•

Alejandro Neri

student•

No entiendo la diferencia entre un mixin y un extend.

No la entiendo, porque por lo que veo… puedo hacer lo mismo con uno que con otro… ¿Alguien me puede explicar cuál es la diferencia?

Jhon Carlos Colorado Angulo

student•

utilizando mixin

@mixin ancho-alto {
    width: 100%;
    height: 100%;
}

p {
    @include ancho-alto;
}

El resultado sería:

p {
    width: 100%;
    height: 100%;
}

Ahora con parámetros:

@mixin ancho-alto ($ancho: 100%, $alto: 100%) {
    width: $ancho;
    height: $alto;
}

p {
    @include ancho-alto (800px);
}

El resultado sería:

p {
    width: 800px;
    height: 100%;
}

Los mixin son muy útiles cuando necesitas cambiar la salida final, pero si lo que quieres es evitar código duplicado, con extend podríamos hacer los siguiente:

.title{
    color: blue;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.parrafo1{
    @extend .title;
}

.parrafo2{
    @extend .title;
}

Como resultado en el css compilado tendríamos

.title, .parrafo1, .parrafo2 {
    color: blue;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

Esto porque el extend se trabaja como una herencia en donde parrafo1 y parrafo2 heredan los mismo atributos de title

Edward Steven Ramos Palacios

teacher•

El mixin es un método que te regresa un resultado dependiendo de los parametros que le envies. El extend es como obtener una "copia" de un grupo de estilos que aplicas directamente.

Mateo Agudelo Echavarria

student•

El curso iba muuuuy bien hasta que... no nos dan el material de clase!

Jose Morales Varon

student•

Salta mucho contenido en cada clase.

Jhon Carlos Colorado Angulo

student•

Por fin le encontré sentido a los placeholder en sass. Gracias Wako. Lo pondré en práctica.

Extend

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales