Your SlideShare is downloading. ×
Intro a Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro a Sass

292
views

Published on

Intro a Sass - Drupaleada Julio 2013

Intro a Sass - Drupaleada Julio 2013

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
292
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Intro a Sass.Por su amigo @leivajd Drupaleada Julio 2013
  • 2. José Leiva leivajd.com / @leivajd
  • 3. CSS es fácil, ¿verdad?
  • 4. .lista-homepage .views-row .views-field-field-dura- cion .views-label { float: left; margin-right: 5px; }
  • 5. #header #navigation { float: left; } #page .menu { float: left; } #main .menu { float: right!important; }
  • 6. #main #sidebar-first { float: left; position: absolute; margin-top: 20px; top: 20px; }
  • 7. h1, h2, h3, h4, h5 { font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 1.2em; font-size: 110%; }
  • 8. Cuando sabemos lo que estamos haciendo.
  • 9. CSS PREPROCESSORS 1
  • 10. titulo blanco
  • 11. http://bit.ly/15PI926
  • 12. http://bit.ly/13Rhowe
  • 13. ¿Porqué usarlos? 2
  • 14. Como no es CSS, no estamos atados a las limitantes de CSS.
  • 15. Como no es CSS, no estamos atados a las limitantes de CSS. Nesting, Variables, Mixins y Functions.
  • 16. Flujo de trabajo rápido y eficiente.
  • 17. Flujo de trabajo rápido y eficiente. DRI code, Variables / Mixins.
  • 18. ¿Funcionan con Drupal? 3
  • 19.
  • 20. Sass 4
  • 21. Sass = Syntactically Awesome Stylesheets
  • 22. http://bit.ly/18nqMpC
  • 23. http://bit.ly/13CnQ2N
  • 24. Sintaxis.
  • 25. Dos formatos: • Sassy CSS / .scss .content-navigation { border-color: $blue; color: darken($blue, 9%); } • Indented syntax / .sass .content-navigation border-color: $blue color: darken($blue, 9%)
  • 26. sass --watch input:output
  • 27. sass --watch scss:css Folders
  • 28. sass --watch style.scss:style.css Archivos
  • 29. Variables.
  • 30. Variables $variableName: Value; • Colores. • Font (size, family) • Medidas
  • 31. Variables
  • 32. Variables #hero-nav { background: $lightblue; padding: $padding; margin-bottom: $padding*2; } #hero-nav { background: #2d94c2; padding: 40px; margin-bottom: 80px; }
  • 33. Nesting.
  • 34. Nesting .module .module ul {} .module li {} .module a {}
  • 35. Nesting .module { ul { } li { } a { } }
  • 36. Nesting li { font: { family: serif; weight: bold; size: 1.2em; } } li { font-family: serif; font-weight: bold; font-size: 1.2em; }
  • 37. Nesting a { text-decoration: none; &:hover { text-decoration: underline; } } a { text-decoration: none; } a:hover { text-decoration: underline; }
  • 38. Nesting .aftercontent { overflow: hidden; width: flex-grid(6); padding-top: $double-spacing-unit; @media screen and (min-width: $break-five) { padding-top: $double-spacing-unit * 2; } } .aftercontent { overflow: hidden; width: 100%; padding-top: 40px; } @media screen and (min-width: 940px) { .aftercontent { padding-top: 80px; } }
  • 39. Mixins.
  • 40. Mixins Nos permite reutilizar porciones de código, se pueden “pasar” argumentos. @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; }
  • 41. Mixins @mixin font-size($font-size, $line-height:true { font-size:$font-size; font-size:($font-size / $base-font-size)*1em; @if $line-height == true{ line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size); } } h2 { @include font-size($h2-size); @media screen and (min-width: $break-four) { @include font-size(24px); } }
  • 42. Mixins h2 { font-size: 20px; font-size: 1.25em; line-height: 1; } @media screen and (min-width: 880px) { h2 { font-size: 24px; font-size: 1.5em; line-height: 1.66667; } }
  • 43. Cuidado! 5
  • 44. Hay que tener en cuenta:
  • 45. Hay que tener en cuenta: • Usar el mismo preprocesador.
  • 46. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local.
  • 47. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local. • Planificar.
  • 48. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local. • Planificar. • Cuidar el output, pero no tanto.
  • 49. Extra 6
  • 50. http://bit.ly/1btglof
  • 51. leivajd.com/intro-sass Más en