Conocer y empezar a trabajar con Sass

Diapositivas de la charla "Conocer y empezar a trabajar con Sass" de Madrid Sass & Compass Meetup

Transcript

1. Conocer y empezar a trabajar con Sass @felixzapata @madridwordpress #MadCSSP1
2. Sobre mí Desarrollador Senior Front End y Consultor de Accesibilidad Web en Adesis. Coorganizador del grupo meetup Madrid Accesibilidad TICs. Organizador del grupo meetup WordPress Madrid. Organizador del grupo meetup Madrid Sass & Compass Meetup. Piloto frustrado... aunque ayudan los simuladores. Aerotranstornado.
3. Preprocesadores online ¿Eso del preprocesamiento es para niñas?
4. ¿Qué es Sass? Sass (Syntactically Awesome Stylesheets), podríamos decir que es un metalenguaje de CSS. Posee dos tipos de sintaxis, la original que es parecida a Haml, y la más nueva que es similar a la escritura de CSS. Nosotros usaremos la segunda. Eso sí, un gran poder conlleva una gran responsabilidad.
5. Características principales Variables Anidamientos Mixins Estructuras de control etc.
6. Cómo se instala Sass Primero, necesitamos instalar Ruby (si somos usuarios de Windows ya que en OS X ya viene instalado). g e m i n s t a l l s a s s s a s s - - w a t c h s t y l e . s c s s : s t y l e . c s s Existen extensiones para los principales editores a la hora de trabajar con Sass.
7. ¿Qué es Compass? Es una biblioteca de mixins, funciones y otros útiles de Sass. Normalmente, si usas Sass a la vez también querrás (deberías) usar Compass.
8. Cómo se instala Compass g e m i n s t a l l c o m p a s s c o m p a s s c r e a t e n o m b r e _ p r o y e c t o c o m p a s s c o m p i l e n o m b r e _ p r o y e c t o
9. Veamos un ejemplo completo
10. Recursos de ayuda Sass - Syntactically Awesome Stylesheets Compass Sass & Compass: The future of stylesheets now. SASS and Compass for Web Designers: Introduction Getting Started with Sass: Installation and the Basics Setting Up Sass on Windows Sass y Compass SassMeister Compass.app Scout