Aplicações Customizáveis com CSS Variables

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 Variáveis estáticas sass input.scss output.css

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 Função calc permite fazer operações com as variáveis color: var(--base-color, #ffffff); --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

Aplicações Customizáveis com CSS Variables

Aplicações Customizáveis com CSS Variables

Labcodes Software Studio

More Decks by Labcodes Software Studio

Other Decks in Technology

Featured

Transcript