CursosEmpresasBlogLiveConfPrecios

Introducción al Curso de Sass

Clase 2 de 21 • Curso de Sass 2018

Clase anteriorSiguiente clase

Contenido del curso

Preprocesador Sass

  • 1
    Qué aprenderás sobre Sass

    Qué aprenderás sobre Sass

    00:37 min
  • 2
    Introducción al Curso de Sass

    Introducción al Curso de Sass

    Viendo ahora
  • 3
    Diferencias entre Sass, Stylus y Less

    Diferencias entre Sass, Stylus y Less

    02:37 min
  • 4
    Compilación de código en archivos CSS

    Compilación de código en archivos CSS

    09:13 min

Instalación

  • 5
    Estructura de CSS

    Estructura de CSS

    08:59 min

Variables

  • 6
    Variables

    Variables

    15:22 min
  • 7
    Reto

    Reto

    03:12 min
  • 8
    Solución al reto

    Solución al reto

    15:54 min

Anidaciones

  • 9
    Anidaciones

    Anidaciones

    12:12 min

Mixins

  • 10
    Mixins

    Mixins

    10:27 min
  • 11
    Continuando con Mixins

    Continuando con Mixins

    05:42 min
  • 12
    Uso de la directiva `content` (`block` en Stylus)

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

    05:38 min
  • 13
    Extend

    Extend

    11:01 min

Funciones

  • 14
    Funciones

    Funciones

    05:43 min
  • 15
    Directiva

    Directiva

    03:25 min
  • 16
    Ejemplos de funciones

    Ejemplos de funciones

    05:42 min
  • 17
    Reto

    Reto

    01:13 min
  • 18

    Reto - Solución

    00:44 min

Controles de Flujo

  • 19
    Listas y directiva each

    Listas y directiva each

    05:24 min
  • 20
    Ciclos FOR/EACH

    Ciclos FOR/EACH

    04:07 min
  • 21
    Condicionales

    Condicionales

    11:05 min
Tomar examen
Resumen

Hola! Soy Daniel Martínez @wakkos. Vamos a conocer las generalidades del uso de Preprocesadores. En este nos concentraremos en Sass que es uno de los preprocesadores más usados en la industria del Frontend.

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
        Jhon Alexander Alvarez Romero

        Jhon Alexander Alvarez Romero

        student•
        hace 6 años

        hubo 2 introducciones

          Oscar Jesus Resendiz Mendoza

          Oscar Jesus Resendiz Mendoza

          student•
          hace 6 años

          Me parece que en todos los cursos hay "clases" que bien podrian simplificarse en 1 sola :c

          Luis Fernando Pedroza Taborda

          Luis Fernando Pedroza Taborda

          student•
          hace 6 años

          Si Jhon, en lo personal, hasta ahora ha sido el primer curso que he visto dos introducciones. jejejej

        Rene Ismael Barrios Rojas

        Rene Ismael Barrios Rojas

        student•
        hace 8 años

        entiendo que saber css y un Preprocesador es indispensable y que tenemos que hacer ciertas características de diseño basado en css pero si bootstrap o fundation te dan casi el 100% para realizar un website para que usar stylus, less o sass o en que casos usar un framework en vez de un Preprocesador, si al final lo que va a producción es un css minificado tanto por parte de stylus,less o sass asi como bootstrap.min.css, seria solo para aprovechar los mixins o funciones? al menos a mi nunca me ha servido usar condicionales en css , igual es solo una opinión y no le eh sacado todo el provecho a los prepros, excelente curso.

          Juan C Felizzola

          Juan C Felizzola

          student•
          hace 8 años

          Le puedes sacar mucho provecho con un preprocesador. Te doy un pequeño ejemplo:
          Si usas las variables adecuadamente puedes hacer cambios rápidos en tu sitio web como cambios de colores, cambios de tamaños en botones o margenes y demás…
          Aparte de tener todo mejor organizado.

          Diego Forero

          Diego Forero

          Team Platzi•
          hace 8 años

          Es cierto que foundation, bootstrap o materialize te dan casi todo para hacer un sitio, pero este sitio no tendrá identidad, sera igual a otros sitios que también usan alguno de estos frameworks con una distribución diferente.

          Aprender a manejar un preprocesador te ayuda a hacer más rápido css, usar características que no tiene css por defecto y además crear sitios web únicos, con su propia identidad.

        Camilo Alexander Velandia Velandia

        Camilo Alexander Velandia Velandia

        student•
        hace 6 años

        que preprocesador usan en platzi?

          Juan Castro

          Juan Castro

          teacher•
          hace 6 años

          Si no me falla la memoria, el ninjaprofe Leonidas ha mencionado que Stylus. Pero puedo que hayan cambiado. O que yo esté loco y me lo esté inventando. :sweat_smile:

          Lo importante es que siguen muy buenas prácticas y lo combinan con React.js. :wink:

          Aarón González

          Aarón González

          student•
          hace 6 años

          Si mi memoria no me falla, Freddy dice en un video que en Platzi usan Stylus :D

        Juan C Felizzola

        Juan C Felizzola

        student•
        hace 8 años

        SASS es el primer preprocesador que usé.

        Christian Velázquez

        Christian Velázquez

        student•
        hace 6 años

        Interesado en aprender de este curso.

        Platzi Team

        Platzi Team

        student•
        hace 6 años

        Vamooooooooo carajo 😂😂

        Daniel

        Daniel

        student•
        hace 5 años

        A

        Jesus Garcia

        Jesus Garcia

        student•
        hace 8 años

        Comenzando con sass, lets go.

        Francisco Imanol Suarez

        Francisco Imanol Suarez

        student•
        hace 6 años

        Vamos ! 🙋‍♂️

        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años

        Buen aporte muchas gracias

        hector vicencio reyes

        hector vicencio reyes

        student•
        hace 7 años

        a comenzar !

        Wladimir Rocha

        Wladimir Rocha

        student•
        hace 7 años

        mejorando un poco en sass xD

        Gilberth Rojas Alfaro

        Gilberth Rojas Alfaro

        student•
        hace 7 años

        Sin duda... el mejor preprocesadores es Sass.

          Daniel Gomez

          Daniel Gomez

          student•
          hace 7 años

          Por que?

        Juan Simon Salazar

        Juan Simon Salazar

        student•
        hace 7 años

        vamos a verlo

        Nixon Fernando Ortiz Suarez

        Nixon Fernando Ortiz Suarez

        student•
        hace 6 años

        Vamos a iniciar son Sass!!

        Sebastian Marin

        Sebastian Marin

        student•
        hace 6 años

        vamos con toda por este curso

        Never Andrés Aparicio Hernandéz

        Never Andrés Aparicio Hernandéz

        student•
        hace 6 años

        a darle!

        Oscar Lopez

        Oscar Lopez

        student•
        hace 6 años

        Eso vamos haber pues como se comportan

        Francisco Javier Araujo de la Garza

        Francisco Javier Araujo de la Garza

        student•
        hace 6 años

        vamo a darle

        Juan Manuel Hernandez Marcano

        Juan Manuel Hernandez Marcano

        student•
        hace 6 años

        good