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

Clase 12 de 21 • Curso de Sass 2018

Resumen

Una de las características que tienen los mixins es la directiva content. Esta nos permite incluir un bloque de contenido dentro de un mixin.

Sergio Toshio Minei

student•

Content

Una de las características que tienen los mixins es la directiva content. Esta nos permite incluir un bloque de contenido dentro de un mixin.

@mixin response-to($width) {
  @media only screen and (min-width: $width) {
    @content;
  }
}

Se usa de esta forma:

section {
  background: blue;
  @include response-to(800px) {
    background-color: red;
  };
}

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Que buen aporte muchas gracias

Carlos Sanguino

student•

Gracias

Alberth Fabian Perez Mendivelso

student•

En el minuto 1:05 alguien le contesta al profesor que lo que va a poner es una variable, que extraño, jejeje.

Luis Fernando Cruz Carrillo

student•

Es una psicofonía... jejeje.

Tomas Salina

student•

Este mixin creado por la comunidad quizas les guste...

/* Media Queries Mixin
**********************/

@mixin media ($breakpoint) {  

  @if $breakpoint == tablet {  
    @media only screen and (min-width: 768px) { @content; }  
  }  
  
  @else if $breakpoint == desktop-s {  
    @media only screen and (min-width: 992px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m {  
    @media only screen and (min-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-l {  
    @media only screen and (min-width: 1480px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-xl {  
    @media only screen and (min-width: 1780px) { @content; }  
  } 

  @else if $breakpoint == mobile-only {  
    @media only screen and (max-width: 768px) { @content; }  
  }

  @else if $breakpoint == tablet-p-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : portrait) { @content; }  
  }  
  
  @else if $breakpoint == tablet-l-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : landscape) { @content; }  
  } 
  
  @else if $breakpoint == desktop-s-only {  
    @media only screen and (min-width: 768px) and (max-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m-only {  
    @media only screen and (min-width: 1200px) and (max-width: 1480px) { @content; }  
  } 
} ```

Jorge Ossa

student•

Tengo una duda, desde el punto de vista de buenas prácticas si es bueno tener una declaración de media query por cada selector? hay forma que con los mixin yo cree el media query y que si yo agrego a otro selector la misma media query, en el archivo final me lo procese dentro de un solo bloque?

SCSS:

section{
  background: blue;
  @include respond-to(320px) {
    background: red;
  }
}
article{
  font-size: 1em;
  @include respond-to(320px){
    font-size: .5em;
  }
}

CSS:

section {
  background: blue;
}

@media only screen and (min-width: 320px) {
  section {
    background: red;
  }
}

article {
  font-size: 1em;
}

@media only screen and (min-width: 320px) {
  article {
    font-size: .5em;
  }
}

Gracias

Johan Marcel Fernandez Castillo

student•

Buena pregunta 🤔

Fabricio Micheli

student•

Técnicamente no importa si tienes muchos media queries, uno por cada selector. Creo que aquí lo importante es que vas a tener un archivo SASS que te va a permitir mantener el código de una manera más eficiente. No creo que a nivel de ejecución el hecho de tener código compartimentado produzca un problema, salvo tener cuidado con el orden de ejecución.
Me parece que la buena práctica aquí pasa por el uso del preprocesador en sí, porque allí es donde vas a encontrar las ventajas en cuanto a manener, y escribir código CSS.

Juan Castro

teacher•

en Stylus 🤔

Juan C Felizzola

student•

Puede asignar cualquier bloque de código en Stylus a una variable y luego llamarlo, pasarlo como argumento o reutilizarlo de cualquier otra forma.

Para definir un bloque, anótelo con un guión aumentado después de un signo de asignación:

foo = 
	ancho: 20px 
	height: 20px

o use una sintaxis de llaves con @block palabra clave:

foo = @block {
	ancho: 20px 
	alto: 20px 
}

Si desea representar este bloque en cualquier lugar, puede llamar a esta variable dentro de una interpolación, de modo que:

.icon {foo} se renderice en

.icon {
ancho: 20px; 
altura: 20px; 
}

Referencia:

Juan Castro

teacher•

BTW este es el curso de Sass 😛

Platzi Team

student•

Comparto codigo que se encuentra en la pagina de Sass con los BreakPoint mas utilizados, este material esta en el curso de preprocesodores que recomiento mucho realizar es muy bueno


/* Media Queries Mixin
**********************/

@mixin media ($breakpoint) {  

  @if $breakpoint == tablet {  
    @media only screen and (min-width: 768px) { @content; }  
  }  
  
  @else if $breakpoint == desktop-s {  
    @media only screen and (min-width: 992px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m {  
    @media only screen and (min-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-l {  
    @media only screen and (min-width: 1480px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-xl {  
    @media only screen and (min-width: 1780px) { @content; }  
  } 

  @else if $breakpoint == mobile-only {  
    @media only screen and (max-width: 768px) { @content; }  
  }

  @else if $breakpoint == tablet-p-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : portrait) { @content; }  
  }  
  
  @else if $breakpoint == tablet-l-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : landscape) { @content; }  
  } 
  
  @else if $breakpoint == desktop-s-only {  
    @media only screen and (min-width: 768px) and (max-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m-only {  
    @media only screen and (min-width: 1200px) and (max-width: 1480px) { @content; }  
  } 
}

Luis Lira

student•

¿Cuál es la diferencia entre usar @media screen y @media only screen?

Hasta ahorita en los cursos que he tomado de Frontend no recuerdo haberme topado con “only screen”. Si está en alguna clase de los otros cursos de Frontend quisiera saber en cuál para repasar 😄

Mario Álvaro Castro Barrón

student•

Que tal amigo.
La keyword only previene que navegadores antiguos que no soportan el uso de media queries apliquen el estilo, es decir esto solo debe aplicarse si el navegador lo permite. Tambien cabe mencionar que esto no tiene ningún efecto en los navegadores que si soportan los media queries

Harold David Avila Sabogal

student•

Que buen aporte muchas gracias

Daniel Páez

student•

Me surge una duda, ¿Solo puede usar una vez la directiva content por función? ¿En caso de que no como se declara más contents ?

Diego Forero

Team Platzi•

Solo se puede usar una vez, no veo un caso de uso donde necesites más, ve la directiva como un placeholder que se reemplaza por lo que pases por parámetro al usar el mixin

Camilo Lucero

student•

Si necesitas pasar contenido a un mixin en diferentes partes de su código, a lo mejor estás buscando un mixin con argumentos.

@mixin box($color, $width) {
   color: $color;
   width: $width;
}

.container  {
   @include box(#77C1EF, 450px);
}

Revisa la documentación de mixins con argumentos para más información.

Josan Guerra

student•

Los breakpoints son los puntos de interrupción en el que responderá el contenido de su sitio, es decir como los tipicos mediaqueries

Gerardo Ruiz

student•

Cuando vieron eso de los media query? me perdí un poco con eso :(

Diego Forero

Team Platzi•

Si no sabes que son los media queries te recomiendo que veas el curso de responsive design, en el curso se explica que son y como se usan dentro de los mixins.

Harold David Avila Sabogal

student•

breakpoints para diferentes resoluciones convencionales de dispositivos por ejemplo:

< /*PC*/
@media screen and (max-width: 1024px){
}
  /*tablet*/
@media screen and (max-width: 767px){
}
 /*phone*/
@media screen and (max-width: 480px){
}
 /*miniphone*/
@media screen and (max-width: 380px){
}>

Daniel Páez

student•

La palabra reservada @content, lo que nos permite es basicamente pasar bloques de codigo como parametro de nuestro mixin.

Dejo mi codigo:

Mixins

//Declaración de $Mixins
//=======================*/

@mixin use-max-width($max-width: $page-max-width) {
	max-width: $max-width;

}

@mixin centered {
	margin-left: auto;
	margin-right: auto;
	padding: $padding-base;
	text-align: center;
}

@mixin respond-to($width) {

	@media only screen and (min-width: $width) {
		@content; //contenido css como parametro
	}
}


/*Un mixin es una funcion 

esta nos permite reusar declaraciones
 y arrojarle parametros

 crea tu parcial de mixins*/

Layout

section {	

	
	@include use-max-width; //Asi llamamos el mixin
	@include centered;
	@include respond-to(800px) {
		font-size: $font-size-base + 5px;
	}

	background-color: $color-grey;
	margin-top: 10px ;
	margin-bottom: 10px;
	
}

Harold David Avila Sabogal

student•

Que buen aporte muchas gracias

Michael Garcia

student•

No me quedo muy claro el concepto del contect. para lo media query ya tenemos el @include media-breakpoint no? Aiuda.

Daniel Esteves

student•

Va, tiene el mismo comportamiento que el @include pero el @content se implementó para poder usarlo dentro de los @mixins :muscle:

Vicente Daniel Zurita Salas

student•

En cuanto ha rendimiento que tan efectivo es esto?, habría muchas media querys regadas por todo el css para diferentes tamaños y elementos.

Usuario anónimo

user•

creo que dependería de que tan bueno eres para identificar donde hacerlos y con que características

Miguel Angel Lozano Alvarez

student•

Estupendo

Andres Rivera

student•

sí a uno le entregan un proyecto sin el original sass hay forma de hacer el proceso inverso?

Simón Arenas

student•

Tengo la misma pregunta, esperemos que alguien más experimentado responda

Usuario anónimo

user•

¿para qué hacer inverso? Sí tienes toda la arquitectura de la aplicación o página web definida con CSS... ahora bien, ya que quieras saber como fue estructurada, te sería mucho más fácil definir componentes, layout, variables, mixins... etc... etc aplicanso Sass. Porque no creo que compiles de CSS a Sass, si fuera así... no existiese Sass, ¿o sí? Eso sería similar a tener un color verde y querer sacar el amarillo, ¿para qué sacar el amarillo si puedo hacer más verde? Todo depende de la necesidad.

Camilo Alexander Velandia Velandia

student•

que tan recomendable es manejar el responsive de esa manera?

Daniel Adolfo Ordoñez Rubio

student•

Hola, Camilo :) Casi siempre dependerá de tu proyecto; qué tan grande o complejo sea, el flujo de trabajo de tu equipo y el gusto personal :smirk:.

andrés eduardo betancourt bescanza

student•

El content sirve para no declarar tantas medias querys? Fue lo que entendi.

Juan Castro

teacher•

No. Sirve para insertar el contenido de una regla CSS cuando usas mixins. Con esta lectura te puede quedar más claro: https://thoughtbot.com/blog/sasss-content-directive.

Enzo Ivan Valdez

student•

Luego de colocar el @content, los estilos se deben agregar en el CSS?, realmente no se explica muy bien, ya que de por si, no es difícil de entender.

Roger Carlos Ariel Alba

student•

Hola, Iván

Pero puedes tomar el curso de Preprocesadores, ahí también se trabaja con Sass y luego regresar por este curso.

Enzo Ivan Valdez

student•

Gracias, ya lo entendí.

Gabriel Ortiz

student•

Tengo una duda con esto, ¿al declarar varias veces las media queries para distintos selectores utilizando la directiva **content **no afecta el performance de la web cuando haya que cargar los estilos?

Por poner un ejemplo:

`section { background: blue; } @media only screen and (max-width: 600px) { section { background: red; } }

ul { background: blue; } @media only screen and (max-width: 600px) { ul { background: red; } }`

Cada vez que se utiliza el content se crea un media querie pero al compilarse, estos no se juntan en una sola regla, sino que quedan por separado. Si esto se hace con un proyecto grande ¿no afectaría el performance? ¿No seria mejor declaras las media queries aparte?

Mauro Quinteros

student•

http://pleeease.io/ Encontré una herramienta llamada pleeease que justo arregla lo que comentas, al compilar diferentes mediaqueries con un mismo min-width o max-width, lo que hace es juntarlo en un solo media querie. Optimizando tus estilos.

Podría ser una alternativa. Saludos

Diego Fernando Rojas Quintero

student•

A que se refiere el termino breakpoint cuando lo explica al profesor? cuando lo traduzco me dice que es un punto de ruptura, alguien que me explique por favor.

Gabriel Ortiz

student•

Son los topes para tus media quieres. Por ejemplo, si estas haciendo un diseño responsive querrás que pueda verse bien en Pc, tablet y teléfono; entonces tienes que escoger cuales serán esos breakpoints para cada dispositivo. Por ponerte un ejemplo: pones el breakpoint de dispositivos moviles en 340px, entonces creas media queries con esa medida.

https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/

Néstor Raúl Guzmán Díaz

student•

Hola Diego, cuando habla de breakpoint se refiere a lso media querys, o como tu tradujiste punto de ruptura en cierto punto (ancho de la pantalla) ya no se ve igual a lo anterior pro que el diseño se rompería, por ejemplo una pagina vista en un laptop y en un mobil si esta pagina hecha en laptop no tiene esos breakpoints en el laptop se vera perfecto, pero en el mobil un total desorden.

/* Media Queries Mixin
**********************/

@mixin media ($breakpoint) {  

  @if $breakpoint == tablet {  
    @media only screen and (min-width: 768px) { @content; }  
  }  
  
  @else if $breakpoint == desktop-s {  
    @media only screen and (min-width: 992px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m {  
    @media only screen and (min-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-l {  
    @media only screen and (min-width: 1480px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-xl {  
    @media only screen and (min-width: 1780px) { @content; }  
  } 

  @else if $breakpoint == mobile-only {  
    @media only screen and (max-width: 768px) { @content; }  
  }

  @else if $breakpoint == tablet-p-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : portrait) { @content; }  
  }  
  
  @else if $breakpoint == tablet-l-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : landscape) { @content; }  
  } 
  
  @else if $breakpoint == desktop-s-only {  
    @media only screen and (min-width: 768px) and (max-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m-only {  
    @media only screen and (min-width: 1200px) and (max-width: 1480px) { @content; }  
  } 
} ```

section {
  background: blue;
}

@media only screen and (min-width: 320px) {
  section {
    background: red;
  }
}

article {
  font-size: 1em;
}

@media only screen and (min-width: 320px) {
  article {
    font-size: .5em;
  }
}

/* Media Queries Mixin
**********************/

@mixin media ($breakpoint) {  

  @if $breakpoint == tablet {  
    @media only screen and (min-width: 768px) { @content; }  
  }  
  
  @else if $breakpoint == desktop-s {  
    @media only screen and (min-width: 992px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m {  
    @media only screen and (min-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-l {  
    @media only screen and (min-width: 1480px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-xl {  
    @media only screen and (min-width: 1780px) { @content; }  
  } 

  @else if $breakpoint == mobile-only {  
    @media only screen and (max-width: 768px) { @content; }  
  }

  @else if $breakpoint == tablet-p-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : portrait) { @content; }  
  }  
  
  @else if $breakpoint == tablet-l-only {  
    @media only screen and (min-width: 768px) and (max-width: 992px) and (orientation : landscape) { @content; }  
  } 
  
  @else if $breakpoint == desktop-s-only {  
    @media only screen and (min-width: 768px) and (max-width: 1200px) { @content; }  
  } 
  
  @else if $breakpoint == desktop-m-only {  
    @media only screen and (min-width: 1200px) and (max-width: 1480px) { @content; }  
  } 
} 

< /*PC*/
@media screen and (max-width: 1024px){
}
  /*tablet*/
@media screen and (max-width: 767px){
}
 /*phone*/
@media screen and (max-width: 480px){
}
 /*miniphone*/
@media screen and (max-width: 380px){
}>

//Declaración de $Mixins
//=======================*/

@mixin use-max-width($max-width: $page-max-width) {
	max-width: $max-width;

}

@mixin centered {
	margin-left: auto;
	margin-right: auto;
	padding: $padding-base;
	text-align: center;
}

@mixin respond-to($width) {

	@media only screen and (min-width: $width) {
		@content; //contenido css como parametro
	}
}


/*Un mixin es una funcion 

esta nos permite reusar declaraciones
 y arrojarle parametros

 crea tu parcial de mixins*/

section {	

	
	@include use-max-width; //Asi llamamos el mixin
	@include centered;
	@include respond-to(800px) {
		font-size: $font-size-base + 5px;
	}

	background-color: $color-grey;
	margin-top: 10px ;
	margin-bottom: 10px;
	
}

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

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