Ir para o conteúdo principal

Variáveis de cor

A definição de variáveis de cor é uma etapa fundamental ao trabalhar com frameworks de desenvolvimento de aplicativos, como Quasar, Ionic 1 e Sencha. Esses frameworks oferecem recursos que permitem personalizar a aparência visual dos aplicativos por meio do uso de variáveis de cor. Este guia tem como objetivo fornecer uma breve documentação sobre como definir variáveis de cor em cada um desses frameworks.

 

Quasar Framework

Crie um arquivo de variáveis no Quasar, as variáveis de cor são definidas em um arquivo chamado quasar.variables.styl. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta src/css/. Defina as variáveis de cor: Abra o arquivo quasar.variables.styl. Declare as variáveis de cor no formato nome-da-variavel = valor.

$primary: #1379df;

$secondary: #5cadff;

$accent: #0060bf;

$light:#f5f9ff;

$dark: #121314;

$positive: #21ba45;

$negative: #c10015;

$warning: #f2c037;

$info: #0060bf;

 

Links: Saiba mais acessando a documentação do Quasar

 

Ionic

Crie um arquivo de variáveis: No Ionic 1, as variáveis de cor são definidas em um arquivo chamado ionic.app.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta raiz do seu projeto Ionic. Defina as variáveis de cor: Abra o arquivo ionic.app.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor.

$light: #FFFFFF;

$stable: #F7F7F7;

$positive: #0076EF;

$balanced: #21C65B;

$energized: #FFC029;

$assertive: #F43A36;

$royal: #7662E3;

$dark: #3C3C3C;

Links: Saiba mais acessando a documentação do Ionic

 

Sencha 4

Crie um arquivo de variáveis: No Sencha, as variáveis de cor são definidas em um arquivo chamado variables.scss. Se esse arquivo ainda não existir no seu projeto, crie-o na pasta sass/ do seu projeto Sencha. Defina as variáveis de cor: Abra o arquivo variables.scss. Declare as variáveis de cor no formato $nome-da-variavel: valor,

$primary-color: #ff0000;

$secondary-color: #00ff00;