CursosEmpresasBlogLiveConfPrecios

Directiva for

Clase 15 de 15 • Curso de Stylus 2018

Clase anteriorSiguiente clase

Contenido del curso

Introducción al curso

  • 1
    Qué aprenderás sobre Stylus

    Qué aprenderás sobre Stylus

    00:49 min
  • 2
    Introducción a Stylus

    Introducción a Stylus

    00:42 min
  • 3
    Compilación e instalación

    Compilación e instalación

    06:55 min

Cómo funciona Stylus

  • 4
    Sintaxis

    Sintaxis

    02:06 min
  • 5
    Anidaciones

    Anidaciones

    08:43 min
  • 6
    Reto: Instalación con Grunt

    Reto: Instalación con Grunt

    00:35 min

Herramientas de Stylus

  • 7
    Variables

    Variables

    07:18 min
  • 8
    Solución del reto y añadir HTML

    Solución del reto y añadir HTML

    06:59 min
  • 9

    Cómo escapar caracteres con Stylus

    01:17 min
  • 10
    Estructura de CSS y propuesta de reto

    Estructura de CSS y propuesta de reto

    05:36 min
  • 11
    Mixins

    Mixins

    04:48 min
  • 12
    Mixins Paramétricos

    Mixins Paramétricos

    03:41 min
  • 13
    Funciones internas

    Funciones internas

    06:51 min
  • 14
    Condicionales

    Condicionales

    08:26 min
  • 15
    Directiva for

    Directiva for

    Viendo ahora
  • Tomar el examen del curso
    • Filiberto Santillán

      Filiberto Santillán

      student•
      hace 8 años

      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

        Harold David Avila Sabogal

        student•
        hace 7 años

        gracias

      Yomar Esteban Miranda Sarmiento

      Yomar Esteban Miranda Sarmiento

      student•
      hace 8 años

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

        Yomar Esteban Miranda Sarmiento

        Yomar Esteban Miranda Sarmiento

        student•
        hace 8 años

        Estamos para ayudarnos.

        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años

        que buen aporte muchas gracias

      Imderf Rios

      Imderf Rios

      student•
      hace 7 años

      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

        Harold David Avila Sabogal

        student•
        hace 7 años

        buen resumen

      Rafael Alvarez Cardona

      Rafael Alvarez Cardona

      student•
      hace 6 años

      Para escapar es => {$i}

      Roger Carlos Ariel Alba

      Roger Carlos Ariel Alba

      student•
      hace 7 años

      en el minuto 7:30 explica como escapar las variables

      Daniel Diaz Orozco

      Daniel Diaz Orozco

      student•
      hace 8 años

      Muy buen curso, Muchas gracias Profe.

        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años

        buen curso

      Ivan Cardozo

      Ivan Cardozo

      student•
      hace 8 años

      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

        Daniel Martínez

        teacher•
        hace 8 años

        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

        Harold David Avila Sabogal

        student•
        hace 7 años

        que buen aporte buena información

      Juan C Felizzola

      Juan C Felizzola

      student•
      hace 8 años

      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

      Rafael Guillermo Rodriguez Garcia

      student•
      hace 8 años

      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

        Harold David Avila Sabogal

        student•
        hace 7 años

        gracias

      Cristian Camilo Cucunubá

      Cristian Camilo Cucunubá

      student•
      hace 8 años

      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

        Harold David Avila Sabogal

        student•
        hace 7 años

        Muchas gracias por tu aporte

      Karina Romero

      Karina Romero

      student•
      hace 7 años

      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

      Teofilo Rosales Gama

      student•
      hace 7 años

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

      alt + 094 = ^

      o simplemente copien y pegen

        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años

        muchas gracias

      Andrés David Solarte Vidal

      Andrés David Solarte Vidal

      student•
      hace 6 años

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

        Sneyder Barreto

        Sneyder Barreto

        student•
        hace 6 años

        ¡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

        Andrés David Solarte Vidal

        student•
        hace 6 años

        Muchas gracias!

      Aracely Alba

      Aracely Alba

      student•
      hace 4 años

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

      Guillermo Castaño Vèlez

      Guillermo Castaño Vèlez

      student•
      hace 5 años

      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

      fredic yohany rojas

      student•
      hace 5 años

      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

      Eduardo Reyes

      student•
      hace 5 años

      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

      Andrés David Loaiza Zamudio

      student•
      hace 5 años

      Por fin vamos por Bootstrap ✌❤💥🚀

      Naldo Duran

      Naldo Duran

      student•
      hace 5 años

      f

      Mateo Espinosa Cubillos

      Mateo Espinosa Cubillos

      student•
      hace 5 años

      Básico

    Escuelas

    • Desarrollo Web
      • Fundamentos del Desarrollo Web Profesional
      • Diseño y Desarrollo Frontend
      • Desarrollo Frontend con JavaScript
      • Desarrollo Frontend con Vue.js
      • Desarrollo Frontend con Angular
      • Desarrollo Frontend con React.js
      • Desarrollo Backend con Node.js
      • Desarrollo Backend con Python
      • Desarrollo Backend con Java
      • Desarrollo Backend con PHP
      • Desarrollo Backend con Ruby
      • Bases de Datos para Web
      • Seguridad Web & API
      • Testing Automatizado y QA para Web
      • Arquitecturas Web Modernas y Escalabilidad
      • DevOps y Cloud para Desarrolladores Web
    • English Academy
      • Inglés Básico A1
      • Inglés Básico A2
      • Inglés Intermedio B1
      • Inglés Intermedio Alto B2
      • Inglés Avanzado C1
      • Inglés para Propósitos Específicos
      • Inglés de Negocios
    • Marketing Digital
      • Fundamentos de Marketing Digital
      • Marketing de Contenidos y Redacción Persuasiva
      • SEO y Posicionamiento Web
      • Social Media Marketing y Community Management
      • Publicidad Digital y Paid Media
      • Analítica Digital y Optimización (CRO)
      • Estrategia de Marketing y Growth
      • Marketing de Marca y Comunicación Estratégica
      • Marketing para E-commerce
      • Marketing B2B
      • Inteligencia Artificial Aplicada al Marketing
      • Automatización del Marketing
      • Marca Personal y Marketing Freelance
      • Ventas y Experiencia del Cliente
      • Creación de Contenido para Redes Sociales
    • Inteligencia Artificial y Data Science
      • Fundamentos de Data Science y AI
      • Análisis y Visualización de Datos
      • Machine Learning y Deep Learning
      • Data Engineer
      • Inteligencia Artificial para la Productividad
      • Desarrollo de Aplicaciones con IA
      • AI Software Engineer
    • Ciberseguridad
      • Fundamentos de Ciberseguridad
      • Hacking Ético y Pentesting (Red Team)
      • Análisis de Malware e Ingeniería Forense
      • Seguridad Defensiva y Cumplimiento (Blue Team)
      • Ciberseguridad Estratégica
    • Liderazgo y Habilidades Blandas
      • Fundamentos de Habilidades Profesionales
      • Liderazgo y Gestión de Equipos
      • Comunicación Avanzada y Oratoria
      • Negociación y Resolución de Conflictos
      • Inteligencia Emocional y Autogestión
      • Productividad y Herramientas Digitales
      • Gestión de Proyectos y Metodologías Ágiles
      • Desarrollo de Carrera y Marca Personal
      • Diversidad, Inclusión y Entorno Laboral Saludable
      • Filosofía y Estrategia para Líderes
    • Diseño de Producto y UX
      • Fundamentos de Diseño UX/UI
      • Investigación de Usuarios (UX Research)
      • Arquitectura de Información y Usabilidad
      • Diseño de Interfaces y Prototipado (UI Design)
      • Sistemas de Diseño y DesignOps
      • Redacción UX (UX Writing)
      • Creatividad e Innovación en Diseño
      • Diseño Accesible e Inclusivo
      • Diseño Asistido por Inteligencia Artificial
      • Gestión de Producto y Liderazgo en Diseño
      • Diseño de Interacciones Emergentes (VUI/VR)
      • Desarrollo Web para Diseñadores
      • Diseño y Prototipado No-Code
    • Contenido Audiovisual
      • Fundamentos de Producción Audiovisual
      • Producción de Video para Plataformas Digitales
      • Producción de Audio y Podcast
      • Fotografía y Diseño Gráfico para Contenido Digital
      • Motion Graphics y Animación
      • Contenido Interactivo y Realidad Aumentada
      • Estrategia, Marketing y Monetización de Contenidos
    • Desarrollo Móvil
      • Fundamentos de Desarrollo Móvil
      • Desarrollo Nativo Android con Kotlin
      • Desarrollo Nativo iOS con Swift
      • Desarrollo Multiplataforma con React Native
      • Desarrollo Multiplataforma con Flutter
      • Arquitectura y Patrones de Diseño Móvil
      • Integración de APIs y Persistencia Móvil
      • Testing y Despliegue en Móvil
      • Diseño UX/UI para Móviles
    • Diseño Gráfico y Arte Digital
      • Fundamentos del Diseño Gráfico y Digital
      • Diseño de Identidad Visual y Branding
      • Ilustración Digital y Arte Conceptual
      • Diseño Editorial y de Empaques
      • Motion Graphics y Animación 3D
      • Diseño Gráfico Asistido por Inteligencia Artificial
      • Creatividad e Innovación en Diseño
    • Programación
      • Fundamentos de Programación e Ingeniería de Software
      • Herramientas de IA para el trabajo
      • Matemáticas para Programación
      • Programación con Python
      • Programación con JavaScript
      • Programación con TypeScript
      • Programación Orientada a Objetos con Java
      • Desarrollo con C# y .NET
      • Programación con PHP
      • Programación con Go y Rust
      • Programación Móvil con Swift y Kotlin
      • Programación con C y C++
      • Administración Básica de Servidores Linux
    • Negocios
      • Fundamentos de Negocios y Emprendimiento
      • Estrategia y Crecimiento Empresarial
      • Finanzas Personales y Corporativas
      • Inversión en Mercados Financieros
      • Ventas, CRM y Experiencia del Cliente
      • Operaciones, Logística y E-commerce
      • Gestión de Proyectos y Metodologías Ágiles
      • Aspectos Legales y Cumplimiento
      • Habilidades Directivas y Crecimiento Profesional
      • Diversidad e Inclusión en el Entorno Laboral
      • Herramientas Digitales y Automatización para Negocios
    • Blockchain y Web3
      • Fundamentos de Blockchain y Web3
      • Desarrollo de Smart Contracts y dApps
      • Finanzas Descentralizadas (DeFi)
      • NFTs y Economía de Creadores
      • Seguridad Blockchain
      • Ecosistemas Blockchain Alternativos (No-EVM)
      • Producto, Marketing y Legal en Web3
    • Recursos Humanos
      • Fundamentos y Cultura Organizacional en RRHH
      • Atracción y Selección de Talento
      • Cultura y Employee Experience
      • Gestión y Desarrollo de Talento
      • Desarrollo y Evaluación de Liderazgo
      • Diversidad, Equidad e Inclusión
      • AI y Automatización en Recursos Humanos
      • Tecnología y Automatización en RRHH
    • Finanzas e Inversiones
      • Fundamentos de Finanzas Personales y Corporativas
      • Análisis y Valoración Financiera
      • Inversión y Mercados de Capitales
      • Finanzas Descentralizadas (DeFi) y Criptoactivos
      • Finanzas y Estrategia para Startups
      • Inteligencia Artificial Aplicada a Finanzas
      • Domina Excel
      • Financial Analyst
      • Conseguir trabajo en Finanzas e Inversiones
    • Startups
      • Fundamentos y Validación de Ideas
      • Estrategia de Negocio y Product-Market Fit
      • Desarrollo de Producto y Operaciones Lean
      • Finanzas, Legal y Fundraising
      • Marketing, Ventas y Growth para Startups
      • Cultura, Talento y Liderazgo
      • Finanzas y Operaciones en Ecommerce
      • Startups Web3 y Blockchain
      • Startups con Impacto Social
      • Expansión y Ecosistema Startup
    • Cloud Computing y DevOps
      • Fundamentos de Cloud y DevOps
      • Administración de Servidores Linux
      • Contenerización y Orquestación
      • Infraestructura como Código (IaC) y CI/CD
      • Amazon Web Services
      • Microsoft Azure
      • Serverless y Observabilidad
      • Certificaciones Cloud (Preparación)
      • Plataforma Cloud GCP

    Platzi y comunidad

    • Platzi Business
    • Live Classes
    • Lanzamientos
    • Executive Program
    • Trabaja con nosotros
    • Podcast

    Recursos

    • Manual de Marca

    Soporte

    • Preguntas Frecuentes
    • Contáctanos

    Legal

    • Términos y Condiciones
    • Privacidad
    • Tyc promociones
    Reconocimientos
    Reconocimientos
    Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
    Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
    Logo reconocimientoPrimera Startup EdTech · 2018
    Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
    Logo reconocimientoCEO Mejor Emprendedor del año · 2024
    De LATAM conpara el mundo
    YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads