Crie uma variável no arquivo .CSS para usar nesse arquivo .CSS [duplicado]

Question

Possível duplicata:
Evitando constantes repetidas em CSS

Temos algumas “cores de tema” que são reutilizadas em nossa planilha CSS.

Existe uma maneira de definir uma variável e reutilizá-la?

Por exemplo.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Answer 1

Não há exigência de que todos os estilos de um seletor residam em uma única regra, e uma única regra pode ser aplicada a vários seletores...então vire-o:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

Dessa forma, você evita repetir estilos que são conceitualmente o mesmo, ao mesmo tempo que deixa claro quais partes do documento eles afetam.

Observe a ênfase em "conceitualmente" na última frase...Isso acabou de aparecer nos comentários, então vou expandir um pouco, já que tenho visto pessoas cometendo esse mesmo erro repetidamente há anos - antes mesmo da existência do CSS: dois atributos compartilhando o mesmo valor não significa necessariamente que representem o mesmo conceito.O céu pode parecer vermelho à noite, assim como os tomates - mas o céu e o tomate não são vermelhos pela mesma razão, e suas cores vai variam ao longo do tempo de forma independente.Da mesma forma, só porque você tem dois elementos em sua folha de estilo que recebem a mesma cor, tamanho ou posicionamento, não significa que eles serão sempre compartilhar esses valores.Um designer ingênuo que usa agrupamento (conforme descrito aqui) ou um processador variável como SASS ou LESS para evitar valor a repetição corre o risco de tornar mudanças futuras no estilo incrivelmente propensas a erros;concentre-se sempre no significado contextual de estilos quando se busca reduzir a repetição, ignorando sua valores atuais.

Answer 2

Você pode conseguir isso e muito mais usando Menos CSS.

Answer 3

Não mas Atrevido faz isso.É um pré-processador CSS, permitindo usar vários atalhos para reduzir a quantidade de CSS que você precisa escrever.

Por exemplo:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Além das variáveis, ele fornece a capacidade de aninhar seletores, mantendo as coisas agrupadas logicamente:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Tem mais:mixins que agem como funções semelhantes e a capacidade de herdar um seletor de outro.É muito inteligente e muito útil.

Se você estiver codificando em Ruby on Rails, ele irá compilá-lo automaticamente em CSS para você, mas também há um compilador de uso geral que pode fazer isso sob demanda.

Answer 4

Você não é o primeiro a se perguntar e a resposta é não.Elliotte tem um belo discurso sobre isso: http://cafe.elharo.com/web/css-repeats-itself/.Você poderia usar JSP, ou equivalente, para gerar CSS em tempo de execução.

Answer 5

CSS não oferece tal coisa.A única solução é escrever um script de pré-processamento que seja executado manualmente para produzir saída CSS estática com base em algum pseudo-CSS dinâmico ou que seja conectado ao servidor web e pré-processe o CSS antes de enviá-lo ao cliente.

Answer 6

Isso não é suportado no momento, a menos que você use algum script para produzir CSS com base em algumas variáveis ​​definidas por você.

Parece, porém, que pelo menos algumas pessoas do mundo dos navegadores estão trabalhando nisso.Então, se ele realmente se tornar um padrão no futuro, teremos que esperar até que seja implementado em todos os navegadores (será inutilizável até então).

Answer 7

Como o CSS não tem isso (ainda acredito que a próxima versão terá), siga o conselho de Konrad Rudolph para pré-processamento.Você provavelmente deseja usar um que já existe:m4

http://www.gnu.org/software/m4/m4.html

Answer 8

Você está complicando demais.Esta é a razão pela qual a cascata existe.Basta fornecer seus seletores de elementos e classificar sua cor:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Em seguida, aplique-o aos elementos do HTML, substituindo quando precisar usar as cores do tema.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

Answer 9

Eu escrevi uma macro (no Visual Studio) que me permite não apenas codificar CSS para cores nomeadas, mas também calcular facilmente sombras ou combinações dessas cores.Ele também lida com fontes.Ele é acionado ao salvar e gera uma versão separada do arquivo CSS.Isto está de acordo com O argumento de Bert Bos que qualquer processamento de símbolo em CSS ocorra no momento da criação, e não no momento da interpretação.

A configuração completa junto com todo o código seria um pouco complicado para postar aqui, mas pode ser apropriado para uma postagem no blog no futuro.Aqui está a seção de comentários da macro que deve ser suficiente para começar.

---

Os objetivos desta abordagem são os seguintes:

1. Permitir cores básicas, fontes, etc.ser definido em um local central, para que uma paleta inteira ou tratamento tipográfico possa ser facilmente ajustado sem a necessidade de pesquisa/substituição

2. Evite ter que mapear a extensão .CSS no IIS

3. Gere arquivos CSS de texto variados que podem ser usados, por exemplo, pelo modo de design do VisualStudio

4. Gere esses arquivos uma vez no momento da criação, em vez de recalculá-los sempre que o arquivo CSS for solicitado

5. Gere esses arquivos de forma instantânea e transparente, sem adicionar etapas extras ao fluxo de trabalho ajustar-salvar-teste

Com essa abordagem, cores, tons de cores e famílias de fontes são todos representados com tokens abreviados que se referem a uma lista de valores em um arquivo XML.

O arquivo XML que contém as definições de cor e fonte deve ser denominado Constants.xml e deve residir na mesma pasta que os arquivos CSS.

O método ProcessCSS é acionado por EnvironmentEvents sempre que o VisualStudio salva um arquivo CSS.O arquivo CSS é expandido e a versão estática expandida do arquivo é salva na pasta /css/static/.(Todas as páginas HTML devem fazer referência às versões /css/static/ dos arquivos CSS).

O arquivo Constants.xml pode ser parecido com isto:

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

No arquivo CSS, você pode ter definições como:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Answer 10

Veja também Evitando constantes repetidas em CSS.Como disse o Farinha, foi feita uma proposta de Variáveis ​​CSS, mas por enquanto você quer usar um pré-processador.

Answer 11

Você pode usar várias classes no atributo class do elemento HTML, cada uma fornecendo parte do estilo.Então você poderia definir seu CSS como:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

e, em seguida, combine as classes conforme necessário:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

Isso permite reutilizar a classe ourColor sem ter que definir a cor várias vezes em seu CSS.Se você alterar o tema, basta alterar a regra para ourColour.

Answer 12

Isso pode parecer loucura, mas se você estiver usando NAnt (ou Ant ou algum outro sistema de construção automatizado), poderá usar as propriedades NAnt como variáveis ​​CSS de uma forma hackeada.Comece com um arquivo de modelo CSS (talvez estilos.css.template ou algo assim) contendo algo assim:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

E, em seguida, adicione uma etapa à sua compilação que atribua todos os valores de propriedade (eu uso buildfiles externos e os <include>) e use o filtro <expandproperties> para gerar o CSS real:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

A desvantagem, claro, é que você precisa executar o alvo de geração de CSS antes de verificar sua aparência no navegador.E provavelmente restringiria você a gerar todo o seu CSS manualmente.

No entanto, você pode escrever funções NAnt para fazer todo tipo de coisas legais além da expansão de propriedades (como gerar arquivos de imagem gradiente dinamicamente), então, para mim, valeu a pena as dores de cabeça.

Answer 13

CSS (ainda) não emprega variáveis, o que é compreensível para sua idade e por ser uma linguagem declarativa.

Aqui estão duas abordagens principais para obter um tratamento de estilo mais dinâmico:

• Variáveis ​​do lado do servidor em CSS embutido
  Exemplo (usando PHP):

  <style> .myclass{color:<?php echo $color; ?>;} </style>

 

• Manipulação de DOM com javascript para alterar css do lado do cliente
  Exemplos (usando a biblioteca jQuery):

  $('.myclass').css('color', 'blue');

  OU

  //The jsvarColor could be set with the original page response javascript
// in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);