Escolar Documentos
Profissional Documentos
Cultura Documentos
CSS Variables
Nicolle Cysneiros
Quem sou eu?
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
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
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
CSS Variables
CSS Variables
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
--gap: 10px;
padding:calc(var(--gap) + 5px);
CSS Variables
TRABALHANDO COM JS
document.documentElement.style.setProperty('--base-color', ‘#000000');
Exemplo de
Aplicação