Directiva for

Cursos Empresas Blog Live Conf Precios

Filiberto Santillán

student•

Escribí un tutorial aquí en la comunidad que espero les sea de gran ayuda.

Conoce más sobre Stylus: datos útiles y otras características:

https://platzi.com/stylus/tutoriales/conoce-mas-datos-sobre-stylus-datos-utiles-y-otras-caracteristicas/

Harold David Avila Sabogal

student•

gracias

Yomar Esteban Miranda Sarmiento

student•

Aquí tengo un resumen que he venido realizando a lo largo del curso:
Resumen Curso Stylus

Yomar Esteban Miranda Sarmiento

student•

Estamos para ayudarnos.

Harold David Avila Sabogal

student•

que buen aporte muchas gracias

Imderf Rios

student•

Esta directiva nos permite realizar ciclos para realizar un determinado número de veces.

grid-size = (1..12)

.grid
	display: flex
	flex-wrap: wrap
	position: relative
	flex-direction: row
	
[class^="grid--item"]
	flex-shrink: 0
	margin-right: 0
	flex-grow: 1
	
for i in grid-size
	.grid--item-{i}
		width: (100 / i) * 1%

Resultado:

.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

[class^="grid--item"] {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.grid--item-1 {
  width: 100%;
}

.grid--item-2 {
  width: 50%;
}

.grid--item-3 {
  width: 33.333333333333336%;
}

.grid--item-4 {
  width: 25%;
}

.grid--item-5 {
  width: 20%;
}

.grid--item-6 {
  width: 16.666666666666668%;
}

.grid--item-7 {
  width: 14.285714285714286%;
}

.grid--item-8 {
  width: 12.5%;
}

.grid--item-9 {
  width: 11.11111111111111%;
}

.grid--item-10 {
  width: 10%;
}

.grid--item-11 {
  width: 9.090909090909092%;
}

.grid--item-12 {
  width: 8.333333333333334%;
}

Harold David Avila Sabogal

student•

buen resumen

Rafael Alvarez Cardona

student•

Para escapar es => {$i}

Roger Carlos Ariel Alba

student•

en el minuto 7:30 explica como escapar las variables

Daniel Diaz Orozco

student•

Muy buen curso, Muchas gracias Profe.

Harold David Avila Sabogal

student•

buen curso

Ivan Cardozo

student•

Muy buen curso profesor , pero me gustaria un poco mas de ejercitacion , hicimos el curso pero no desarrollamos en si un proyecto , hubiese estado muy bueno -

Daniel Martínez

teacher•

Te propongo lo siguiente: Crea tu framework de CSS, que puedas usar en todos los proyectos. Si quieres ver un ejemplo, mira lo que yo he creado:
https://github.com/Wakkos/Wakkos-CSS-Framework

Está en desarrollo, pero… A partir de ese repo, yo empiezo todos mis proyectos (Incluso en empresas grandes).

Es un ejercicio que SIEMPRE ayuda a sacar nuestra “creatividad” con preprocesadores, y es algo que nos será siempre útil.

Harold David Avila Sabogal

student•

que buen aporte buena información

Juan C Felizzola

student•

Hizo falta un ejercicio práctico!

Buen contenido… seguimos con los demás cursos de preprocesadores.
Seguimos esperando el examen de certificación.

Rafael Guillermo Rodriguez Garcia

student•

Para los interesados en generar el código css al salvar el archivo .styl, les dejo este aporte.
https://platzi.com/stylus/tutoriales/automatizar-jade-y-stylus-con-sublime-text-3/

Harold David Avila Sabogal

student•

gracias

Cristian Camilo Cucunubá

student•

Reto Sprite de Banderas

HTML

<div class="container">
  <div class="flag flag-usa">
    
  </div>
  <div class="flag flag-uk">
  
  </div>
</div>

CSS

flag-url = "https://image.flaticon.com/sprites/new_packs/551843-square-country-simple-flags.png"

flags = { uk: -36px, usa: -236px, japan: -436px }

.container
	border: 1px solid red;
.flag
  	width: 130px
 	height: 128px
  	background-position-y: -30px
  	background-image: url(flag-url)

for flag in flags
  	.flag.flag-{flag}
    		background-position-x: flags[flag]

Demo

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Karina Romero

student•

Range .. … Both the inclusive (..) and exclusive (...) range operators are provided, expanding to expressions:

1..5 // => 1 2 3 4 5

1...5 // => 1 2 3 4

5..1 // => 5 4 3 2 1

fuente

Teofilo Rosales Gama

student•

por si tiene problemas con el simbolo de sombrero aqui se los dejo:

alt + 094 = ^

o simplemente copien y pegen

Harold David Avila Sabogal

student•

muchas gracias

Andrés David Solarte Vidal

student•

Entonces, para escapar es con {$variable} o {variable}?

Sneyder Barreto

student•

¡Hola! Se puede de las dos maneras. Ya dependería de si declaraste la variable con el "$" o no. Un saludo.

Andrés David Solarte Vidal

student•

Muchas gracias!

Aracely Alba

student•

El for también se puede usar en funciones y mixins.

Guillermo Castaño Vèlez

student•

Me queda in sin sabor con el curso...3 de preprocesadores y me quedé con las ganas de ver la aplicación de Platzi Music. Con solo sintaxis y sin una aplicación real a toda esa teoría es muy difícil saber si en verdad es una buena opción usar preprocesadores....es más hoy en 2020 no se si siguen vigentes

fredic yohany rojas

student•

Dejo mi ejemplo con uso de listas. Pero antes quiero decir:

Vue + Pug + Stylus = La Santa Trinidad XD to me!

banderas = es, ar, co, usa

for i , x in banderas
  .grid-item-{i}
    width (100 / ( x + 1 ) ) * 1%

resultado

.grid-item-es {
  width: 100%;
}
.grid-item-ar {
  width: 50%;
}
.grid-item-co {
  width: 33.333333333333336%;
}
.grid-item-usa {
  width: 25%;
}

Eduardo Reyes

student•

La solución para mí era algo como esto:

banderas = es, us, gt, mx

.bandera
  for bandera, i in banderas
    & &--{bandera}
      background-image url('bandera.jpg')
      background-position-x 0 + (10 * i)px
      height 10px
      width 10px

Andrés David Loaiza Zamudio

student•

Por fin vamos por Bootstrap ✌❤💥🚀

Naldo Duran

student•

Mateo Espinosa Cubillos

student•

Básico

Directiva for

Introducción al curso

Qué aprenderás sobre Stylus

Introducción a Stylus

Compilación e instalación

Cómo funciona Stylus

Sintaxis

Anidaciones

Reto: Instalación con Grunt

Herramientas de Stylus

Variables

Solución del reto y añadir HTML

Cómo escapar caracteres con Stylus

Estructura de CSS y propuesta de reto

Mixins

Mixins Paramétricos

Funciones internas

Condicionales

Directiva for