SASS para iniciantes.

Evento: Job Conecta - Caruaru

Esta palestra engloba os principais conceitos para você iniciar no SASS. Mostrando as diferentes formas para instalar e compilar, passando de forma resumida por: variáveis, nesting, partial, import, mixins, extend e operadores.

Transcript

1. View Slide

2. OLÁ Thulio Philipe
   github.com/thulioph
   twitter.com/thulioph_
   thulioph.com
   speakerdeck.com/thulioph
   

   View Slide

3. i'm from
   Recife!
   

   View Slide

4. View Slide

5. O que é?
   

   View Slide

6. View Slide

7. Como instalar?
   O que é?
   

   View Slide

8. Applications command line
   

   View Slide

9. z
   Applications
   usaremos este
   

   View Slide

10. command line
    Linux
    sudo su -c "gem install sass"
    Windows
    Ruby Installer
    Mac
    sudo gem install sass
    

    View Slide

11. View Slide

12. variables
    

    View Slide

13. variables
    Pense em variáveis como uma maneira de armazenar informações que você deseja
    reutilizar.
    $ff-primary: "Helvetica, sans-serif";
    $color-primary: #000000;
    h1 {
    font-family: $ff-primary;
    color: $color-primary;
    }
    header {
    background-color: $color-primary;
    }
    h1 {
    font-family: "Helvetica, sans-serif";
    color: #000000;
    }
    header {
    background-color: #000000;
    }
    scss css
    

    View Slide

14. variables
    nesting
    

    View Slide

15. nesting
    Esta é uma ótima maneira de organizar o seu CSS e torná-lo mais legível
    nav {
    li { display: inline-block; }
    a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover {
    text-decoration: underline;
    }
    }
    }
    nav li {
    display: inline-block;
    }
    nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    }
    nav a:hover {
    text-decoration underline;
    }
    scss css
    

    View Slide

16. variables
    nesting
    partials and import
    

    View Slide

17. partials and import
    O partial l é simplesmente um arquivo Sass nomeado com um underline.
    _reset.scss
    _base.scss
    @import 'reset';
    @import 'base';
    /*reset*/
    html, body, ul, ol {
    margin: 0;
    padding: 0;
    }
    /*base*/
    header {
    background-color: #000000;
    font-family: "Helvetica, sans-serif";
    }
    scss css
    /*partials*/
    /*import in main file*/
    O import é usado igual ao CSS porém sem exigir uma requisição HTTP
    

    View Slide

18. variables
    nesting
    partials and import
    mixins
    

    View Slide

19. mixins
    Um mixin permite fazer grupos de declarações CSS que você deseja reutilizar
    @mixin bdr($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
    }
    .box {
    @include bdr(10px);
    }
    .box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    }
    scss css
    

    View Slide

20. variables
    nesting
    partials and import
    mixins
    extend
    

    View Slide

21. extend
    O uso do @extend permite compartilhar um conjunto de propriedades CSS de um
    seletor para outro
    .message {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    }
    .success {
    @extend .message;
    color: green;
    }
    .error {
    @extend .message;
    color: red;
    }
    .message, .success, .error, .warning {
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    }
    .success {
    color: green;
    }
    .error {
    color: red;
    }
    scss css
    

    View Slide

22. variables
    nesting
    partials and import
    mixins
    extend
    operators
    

    View Slide

23. operators
    Efetuar operações matemáticas em CSS é muito útil.
    scss css
    $fixed-width: 960px;
    .main {
    float: left;
    width: (600px / $fixed-width) * 100%;
    }
    .complementary {
    float: right;
    width: (300px / $fixed-width) * 100%;
    }
    .main {
    float: left;
    width: 62.5%;
    }
    .complimentary {
    float: right;
    width: 31.25%;
    }
    

    View Slide

24. View Slide

25. show me the code!
    

    View Slide

26. Muito obrigado
    @thulioph_
    

    View Slide

27. View Slide