$30 off During Our Annual Pro Sale. View Details »

SASS para iniciantes.

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.

Thulio Philipe

August 22, 2015
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

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