Scribd Logo
Importer

Bienvenue sur Scribd !

  • CSS Variables

    Transféré par

    Walter Angolar Da Silva
    12 vues26 pages
    CSS Variables

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    CSS Variables

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    12 vues26 pages

    CSS Variables

    Transféré par

    Walter Angolar Da Silva
    CSS Variables

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 26

    Aplicações Customizáveis com

    CSS Variables
    Nicolle Cysneiros
    Quem sou eu?

    Fullstack Developer @ Labcodes


    Django

    AngularJS

    HTML e CSS

    PUG-PE
    PyLadies Recife
    Labcodes

    Estúdio de Software
    de Recife para o
    mundo
    Tecnologias
    trabalhadas
    Labcodes e a
    comunidade
    Roteiro

    Aplicações Customizáveis
    Motivação e Exemplos

    Abordagem usando SASS


    CSS Variables
    Abordagem usando CSS Variables
    Aplicações
    Customizáveis
    Aplicações Customizáveis
    MOTIVAÇÃO

    Software as a Service (SaaS)


    White-Labels

    Experiência do Usuário
    Aplicações Customizáveis
    EXEMPLOS - SMARTER AGENT
    Aplicações Customizáveis
    EXEMPLOS - NAORA
    Como deixar o estilo
    customizável?
    Usando SASS

    Preprocessador CSS
    Inclui novas features
    Variáveis

    Aninhamento

    Mixins e Herança

    Operadores e Funções Auxiliares


    $base-color: #ce0149;
    $highlight-color: #cdafff;

    p {
    color: $base-color;
    }

    h1, h2, h3 {
    color: $base-color;
    }

    span {
    color: $highlight-color;
    }

    a {
    color: $highlight-color;
    }
    Usando SASS

    É necessário compilar

    sass input.scss output.css

    Variáveis estáticas
    CSS Variables
    CSS Variables

    Implementação nativa de variáveis em CSS


    Pode ser utilizado em todas as propriedades
    Seguem as regras em cascata
    :root {
    --base-color: #266de0;
    --highlight-color: #ef33cf;
    }

    p {
    color: var(--base-color);
    }

    span {
    color: var(--highlight-color);
    }

    a {
    color: var(--highlight-color);
    }

    .text {
    --highlight-color: #ebef32;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Variables</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <section class=section>
    <div class="container">
    <h1 class="title">Hello World</h1>
    <p class="text">
    Lorem ipsum …<span>ultricies nunc</span>…
    </p>
    <a href="#">Link</a>
    <p>Created in <span>29/09/2017</span></p>
    </div>
    </section>
    </body>
    </html>
    CSS Variables

    Função var permite a configuração de um


    valor default

    color: var(--base-color, #ffffff);

    Função calc permite fazer operações com as


    variáveis

    --gap: 10px;
    padding:calc(var(--gap) + 5px);
    CSS Variables
    TRABALHANDO COM JS

    Podemos modificar dinamicamente o valor das


    variáveis usando Javascript

    document.documentElement.style.setProperty('--base-color', ‘#000000');
    Exemplo de
    Aplicação

    Disponível em: custom-blog-theming.herokuapp.com


    username: john_snow password: john1234
    Código-fonte disponível em:
    https://github.com/nicysneiros/custom-blog-theming.git
    SASS ou CSS Variables?

    SASS não permite modificação dinâmica de


    variável com JS
    Porém possui outras features além de variáveis

    Aninhamento, herança e mixins ajudam a


    organizar projetos grandes
    SASS ou CSS Variables?
    SASS ou CSS Variables?

    SASS + CSS Variables?


    Aninhamento, heranças e mixis em conjunto com
    variáveis dinâmicas

    Funções auxiliares de SASS não funcionam com


    CSS variables como parâmetro

    Compatibilidade de browsers ainda é limitada


    Dúvidas?
    www.labcodes.com.br
    speakerdeck.com/labcodes
    github.com/nicysneiros
    twitter.com/nicysneiros

    Vous aimerez peut-être aussi