Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Sass: CSS con Superpoderes

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Pre-procesadores CSS. SASS
Pre-procesadores CSS. SASS
Cargando en…3
×

Eche un vistazo a continuación

1 de 36 Anuncio

Sass: CSS con Superpoderes

Descargar para leer sin conexión

Una presentación sobre los fundamentos de Sass y sus posibilidades para ampliar las características de CSS en nuestros sitios y aplicaciones web.

Una presentación sobre los fundamentos de Sass y sus posibilidades para ampliar las características de CSS en nuestros sitios y aplicaciones web.

Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Sass: CSS con Superpoderes (20)

Anuncio

Más de Edgar Parada (17)

Más reciente (20)

Anuncio

Sass: CSS con Superpoderes

  1. 1. CSS con superpoderes Edgar Parada | @edgarparada
  2. 2. Hoy ya no soy yo… • Business Development Manager • Developer Evangelist • Community Professional • User Group - Team • Emprendedor & Líder • Instructor & Speaker • Melómano y fan del Rock Nacional
  3. 3. Agenda del día • Plataforma Web • Fundamentos de HTML & CSS • Flujo de Trabajo • Pre-procesadores CSS (Less, Sass, Stylus) • Sass 101 • Q & A
  4. 4. Plataforma Web WebPlatform.org
  5. 5. “Everyone has something to contribute to the World Wide Web. Why? Because the Web is of us…” –Molly Holzschlag (www.molly.com)
  6. 6. Fundamentos • Hyper Text Markup Language • Tags (encabezados, párrafos, links, imágenes, etc.) • Formato y Estructura • Browsers • Editores • HTML5
  7. 7. Fundamentos • Cascading Style Sheets • Selectors (elementos, id, clases, avanzados, etc.) • Propiedades (fondos, texto, bordes, links, etc.) • Modelo de Caja • CSS3
  8. 8. Flujo de Trabajo
  9. 9. Pre-procesadores (Sass) CSS por si mismo puede ser divertido, pero las hojas de estilos cada vez se vuelven más largas, complejas y difíciles de mantener. Es aquí donde un pre-procesador puede ayudar. Sass permite usar características que no existen en CSS y al final cuando guardas tu archivo Sass se convertirá en un archivo CSS normal.
  10. 10. Syntactically Awesome Stylesheets
  11. 11. Código SASS (Sintaxis SCSS) ! ! $font-stack: Helvetica, sans-serif; $primary-color: #333; ! body { font: 100% $font-stack; color: $primary-color; } ! Resultado en CSS! ! body { font: 100% Helvetica, sans-serif; color: #333; }
  12. 12. Instalación Sass
  13. 13. $ gem install sass
  14. 14. Configuración • Simple comando (Archivo / Carpeta) $ sass --watch estilo.scss:estilo.css $ sass --watch estilos/sass:estilos • Aplicación de Escritorio (Scout, Codekit, Compass)
  15. 15. Sintaxis Original de Sass
  16. 16. Código SASS (Sintaxis Original) ! ! $font-stack: Helvetica, sans-serif $primary-color: #333 ! body font: 100% $font-stack color: $primary-color ! Resultado en CSS! ! body { font: 100% Helvetica, sans-serif; color: #333; }
  17. 17. Estilos del Código • Nested (default) - Código anidado para reflejar estructura de HTML $ sass --style nested • Expanded - Formato típico de CSS, ideal para aprendizaje • Compact - Estilo de línea para acceder más rápido a los selectores • Compressed - Pensado para optimización en sitios con mucho tráfico
  18. 18. Nesting
  19. 19. Código SASS! ! $nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a { display: block; padding: 6px 12px; text-decoration: none; } }
  20. 20. Resultado en CSS! ! nav ul { margin: 0; padding: 0; list-style: none; } ! nav li { display: inline-block; } ! nav a { display: block; padding: 6px 12px; text-decoration: none; }
  21. 21. Import
  22. 22. Código SASS! ! // _reset.scss ! html, body, ul, ol { margin: 0; padding: 0; } ! /* base.scss */ ! @import 'reset'; ! body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
  23. 23. Resultado en CSS! ! html, body, ul, ol { margin: 0; padding: 0; } ! body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
  24. 24. Mixins
  25. 25. Código SASS! ! @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } ! .box { @include border-radius(10px); }
  26. 26. Resultado en CSS! ! .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
  27. 27. Extend/Inheritance
  28. 28. Código SASS! ! .message { border: 1px solid #ccc; padding: 10px; color: #333; } ! .success { @extend .message; border-color: green; } ! .error { @extend .message; border-color: red; } ! .warning { @extend .message; border-color: yellow; }
  29. 29. Resultado en CSS! ! .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } ! .success { border-color: green; } ! .error { border-color: red; } ! .warning { border-color: yellow; }
  30. 30. Operators
  31. 31. Código SASS! ! .container { width: 100%; } ! article[role="main"] { float: left; width: 600px / 960px * 100%; } ! aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
  32. 32. Resultado en CSS! ! .container { width: 100%; } ! article[role="main"] { float: left; width: 62.5%; } ! aside[role="complimentary"] { float: right; width: 31.25%; }
  33. 33. ¿Preguntas?
  34. 34. CSS con superpoderes Edgar Parada | @edgarparada

×