Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass: CSS com superpoderes

Sass: CSS com superpoderes

Minicurso ministrado na SCTI-UENF/2014

Rômulo Machado

November 05, 2014
Tweet

More Decks by Rômulo Machado

Other Decks in Programming

Transcript

  1. – Sass for Web Designers, Chris Coyier “Sass doesn’t make

    your job harder, it makes it easier.” http://chriscoyier.net/wp-content/uploads/2008/07/me3.jpg
  2. SCSS Sass h1 { background: gray; color: blue; } h2

    { font-weight: bold; color: red; } h1 background: gray color: blue h2 font-weight: bold color: red
  3. Instalação Mac e Linux: $ gem install sass $ sass

    -v Sass 3.4.5 (Selective Steve) Windows http://rubyinstaller.org/
  4. O que veremos hoje? • Comentários
 • Imports
 • Nesting


    • Variáveis • Mixins
 • Extend
 • Diretivas
 • Hands-on
  5. // Estes comentários não vão // para o arquivo CSS

    compilado /* este vai */ Comentários /* este vai */ application.scss application.css
  6. @import (CSS) /* * Importa todos os estilos encontrados em

    * 'buttons.css' quando o browser faz o * request de application.css * */ @import "buttons.css"; application.css
  7. @import (Sass) /* * Importa os estilos encontrados em *

    'buttons.css' quando o compilador * for processar application.css * */ @import "buttons"; application.scss
  8. @import (Sass) /* * Vai buscar por _buttons.sass, * buttons.sass,

    _buttons.scss ou * buttons.scss e importar. * */ @import "buttons"; application.scss
  9. section { padding: 0; } section hr { text-align: center;

    max-width: 400px; border-top: 2px solid #3EA3DB; margin: 0 auto; } section h3.top { font-size: 70px; } application.css
  10. section { padding: 0; hr { text-align: center; max-width: 400px;

    border-top: 2px solid #3EA3DB; margin: 0 auto; } h3.top { font-size: 70px; } } application.scss
  11. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    .image { width: 100%; } } application.scss
  12. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    } .browser-shot-1 .image { width: 100%; } application.css
  13. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    } .browser-shot-1 .image { width: 100%; } application.css .image dentro de .browser-shot-1
  14. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    &.active { bottom: -40px; } } application.scss
  15. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    } .browser-shot-1.active { bottom: -40px; } application.css
  16. &: o seletor PAAAI .browser-shot-1 { width: 50%; overflow: hidden;

    } .browser-shot-1.active { bottom: -40px; } application.css elemento que tem
 as duas classes
  17. &: o seletor PAAAI .btn-inscrever { color: #fff; &:hover {

    color: #2ABB9B; } &.disabled:hover { color: #fff; } } application.scss
  18. &: o seletor PAAAI .btn-inscrever { color: #fff; } .btn-inscrever:hover

    { color: #2ABB9B; } .btn-inscrever.disabled:hover { color: #fff; } application.css
  19. &: o seletor PAAAI h2 { font-size: 2.5em; } .sidebar

    h2 { font-size: 1.5em; } application.css
  20. &: o seletor PAAAI h2 { font-size: 2.5em; .sidebar &

    { font-size: 1.5em; } } application.scss
  21. Variáveis: Tipos // Números (com ou sem unidade) $margin: 20px;

    $line-height:: 1.5; $font-size: 2em; application.scss
  22. Variáveis: Tipos // Cores $base: red; $border-color: rgba(0, 0, 0,

    .4); $background-color: #333; application.scss
  23. Variáveis: Tipos // Strings (com ou sem aspas) $font-base: Helvetica

    Neue; $default-alignment: left; application.scss
  24. Variáveis: Tipos // Listas $organizadores: annabell bruna eduardo kalebe maira

    natalie ohana rodrigo thawan; $padding: 20px 0; application.scss
  25. Variáveis: Escopo #organizadores-section { $base-color: #fff; background-color: #a3d39c; color: $base-color;

    } hr { border-color: $base-color; } application.scss Erro de compilação
  26. Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c;

    color: $base-color; } hr { border-color: $base-color; } application.scss
  27. Variáveis: Escopo $base-color: #fff; #organizadores-section { $base-color: #333; background-color: #a3d39c;

    color: $base-color; } hr { border-color: $base-color; } #333, $base-color foi sobrescrito application.scss
  28. Variáveis: Interpolação Use a interpolação igual a do Ruby #{$variavel}

    para completar seletores, propriedades ou valores.
  29. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff;

    -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
  30. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff;

    -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
  31. Mixins .btn-danger { @include btn; background-color: hsl(360, 82%, 44%); }

    .btn-success { @include btn; background-color: hsl(157, 43%, 44%); } _buttons.scss
  32. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff;

    -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); background-repeat: repeat-x; color: #fff; -webkit-font-smoothing: antialiased; } application.css
  33. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:

    #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
  34. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:

    #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
  35. #palestrantes-section { @include section-colors(#35404f, #fff); } #inscricao-section { @include section-colors(#fff,

    #2ABB9B); } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
  36. #palestrantes-section { background-color: #35404f; color: #fff; } #inscricao-section { background-color:

    #fff; color: #2ABB9B; } #patrocinadores-section { background-color: #e9e0d6; color: #fff; } application.css
  37. #palestrantes-section { @include section-colors(#35404f); } #inscricao-section { @include section-colors(#fff, #2ABB9B);

    } #patrocinadores-section { @include section-colors(#e9e0d6, #fff); } application.scss
  38. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff;

    -webkit-font-smoothing: antialiased; } .btn-success { @extend .btn-danger; background-color: hsl(157, 43%, 44%); } application.scss
  39. .btn-danger, .btn-sucess { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color:

    #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } application.css
  40. .btn-danger { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color: #fff;

    -webkit-font-smoothing: antialiased; } .btn-success { @extend .btn-danger; background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { text-transform: lowercase; } application.scss
  41. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color:

    #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger, .sidebar .btn-sucess { text-transform: lowercase; } application.scss
  42. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color:

    #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger, .sidebar .btn-sucess { text-transform: lowercase; } application.scss se não vamos usar, pra quê criar?
  43. .btn-danger { @extend %btn; background-color: hsl(360, 82%, 44%); } .btn-success

    { @extend %btn; background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { @extend %btn; text-transform: lowercase; } application.scss
  44. .btn-danger, .btn-success { background-color: hsl(360, 82%, 44%); background-repeat: repeat-x; color:

    #fff; -webkit-font-smoothing: antialiased; } .btn-success { background-color: hsl(157, 43%, 44%); } .sidebar .btn-danger { text-transform: lowercase; } application.css
  45. Recap mixins: grupos similares de propriedades usados várias vezes com

    pequenas variações extend: grupos de propriedades que são idênticos
  46. @if $rounded: true; .btn { @if $rounded == true {

    border-radius: 10px; } } application.scss
  47. @each $list: foo bar baz; @each $element in $list {

    .#{$element} { } } application.scss
  48. @each $palestrantes: romulo almir bruna; @each $palestrante in $palestrantes {

    .palestrante-#{$palestrante} { background: url('foto-#{$palestrante}.jpg'); } } application.scss
  49. @for .item { @for $i from 1 through 3 {

    &.item-#{$i} { content: '#{$i}'; } } } application.scss
  50. @for .item.item-1 { content: "1"; } .item.item-2 { content: "2";

    } .item.item-3 { content: "3"; } application.css
  51. @while $i: 1; .item { @while $i < 4 {

    &.item-#{$i} { content: '#{$i}'; } $i: $i + 1; } } application.scss
  52. @while .item.item-1 { content: "1"; } .item.item-2 { content: "2";

    } .item.item-3 { content: "3"; } application.css