Crie uma variável no arquivo .CSS para uso nesse arquivo .CSS

Duplicar Possível:
Evitando constantes repetidas no CSS

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

Existe uma maneira de definir uma variável e, em seguida, reutilizá-lo?

Por exemplo

.css OurColor: Blue H1 { color:OurColor; } 

Não há exigência de que todos os estilos para um seletor residam em uma única regra, e uma única regra pode se aplicar a vários seletores … então, inverta :

 /* 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 os mesmos, além de deixar claro quais partes do documento elas afetam.

Note a ênfase em “conceitualmente” na última frase … Isso só surgiu nos comentários, então eu vou expandir um pouco, já que eu vi pessoas cometendo esse mesmo erro repetidas vezes por anos – antes mesmo da existência do CSS: dois atributos compartilhando o mesmo valor não significa necessariamente que eles representam o mesmo conceito . O céu pode parecer vermelho à noite, e os tomates também – mas o céu e o tomate não são vermelhos pelo mesmo motivo, e suas colors variam com o tempo independentemente. Da mesma forma, só porque você tem dois elementos em sua folha de estilo que recebem a mesma cor, ou tamanho ou posicionamento, isso não significa que eles sempre compartilharão esses valores. Um designer ingênuo que usa agrupamento (como descrito aqui) ou um processador variável como SASS ou LESS para evitar riscos de repetição de valor , tornando futuras alterações no estilo incrivelmente propensas a erros; sempre se concentre no significado contextual dos estilos ao tentar reduzir a repetição, ignorando seus valores atuais .

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

Não, mas o Sass faz isso. É um pré-processador de CSS, permitindo que você use muitos 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 variables, fornece a capacidade de aninhar seletores, mantendo as coisas logicamente agrupadas:

 table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } 

Há mais: mixins que funcionam como funções e a capacidade de herdar um seletor de outro. É muito inteligente e muito útil.

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

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

CSS não oferece nada disso. A única solução é escrever um script de pré-processamento que seja executado manualmente para produzir uma saída CSS estática baseada em algum pseudo-CSS dynamic ou conectado ao servidor web e pré-processar o CSS antes de enviá-lo ao cliente.

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

Parece, no entanto, que pelo menos algumas pessoas do mundo dos navegadores estão trabalhando nisso . Então, se 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).

Como o CSS não tem isso (ainda, acredito que a próxima versão será), siga os conselhos de Konrad Rudolph para preprocesing. Você provavelmente quer usar um que já exista: m4

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

Você está tornando isso muito complicado. Esta é a razão pela qual a cascata existe. Simplesmente forneça seus seletores de elementos e classifique sua cor:

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

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

 

This is my heading.

This is my theme heading.

Eu escrevi uma macro (no Visual Studio) que me permite não só codificar CSS para colors nomeadas, mas para facilmente calcular tons ou misturas dessas colors. Também lida com fonts. Ele triggers em salvar e gera uma versão separada do arquivo CSS. Isso está de acordo com o argumento de Bert Bos de que qualquer processamento de símbolos em CSS ocorre no momento da criação, não no ponto de interpretação.

A configuração completa junto com todo o código seria um pouco complicada demais para postar aqui, mas pode ser apropriada para um post no blog abaixo da estrada. Aqui está a seção de comentários da macro, que deve ser suficiente para começar.


Os objectives dessa abordagem são os seguintes:

  1. Permitir que colors básicas, fonts, etc. sejam definidos em um local central, de modo que uma paleta inteira ou tratamento tipográfico possa ser facilmente ajustado sem a necessidade de usar pesquisa / substituição

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

  3. Gere arquivos CSS de texto com variedade de jardim 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 toda vez que o arquivo CSS for solicitado

  5. Gere esses arquivos instantaneamente e de forma transparente, sem adicionar etapas extras ao stream de trabalho de teste de economia de ajustes

Com essa abordagem, colors, tons de colors e famílias de fonts 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 chamado Constants.xml e deve residir na mesma pasta que os arquivos CSS.

O método ProcessCSS é triggersdo por EnvironmentEvents sempre que o VisualStudio salva um arquivo CSS. O arquivo CSS é expandido e a versão expandida e estática do arquivo é salva na pasta / css / static /. (Todas as páginas HTML devem referenciar as / css / static / versions dos arquivos CSS).

O arquivo Constants.xml pode ser algo como isto:

      ...     ...   

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 */ 

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

Você pode usar múltiplas classs no atributo de class do elemento HTML, cada uma fornecendo parte do estilo. Então você pode definir seu CSS como:

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

e combine as classs conforme necessário:

 

Blue Header

Some big blue text.
Some blue text with blue border.

Isso permite que você reutilize a class ourColor sem ter que definir a cor em vários tempos no seu CSS. Se você alterar o tema, basta alterar a regra para ourColour.

Isso pode soar como insanidade, mas se você estiver usando NAnt (ou Ant ou algum outro sistema de compilation automatizado), você pode usar as propriedades NAnt como variables ​​CSS de maneira hacky. Comece com um arquivo de modelo CSS (talvez styles.css.template ou algo assim) contendo algo como isto:

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

Em seguida, inclua uma etapa em sua construção que designe todos os valores de propriedade (eu uso buildfiles externos e ) e use o filtro para gerar o CSS real:

         

A desvantagem, é claro, é que você precisa executar o alvo de geração de CSS antes de poder verificar como ele se parece no navegador. E provavelmente restringiria você a gerar todo o seu css manualmente.

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

O CSS (ainda) não emprega variables, o que é compreensível pela sua idade e por ser uma linguagem declarativa.

Aqui estão duas abordagens principais para obter um estilo de manipulação mais dynamic:

  • Variáveis ​​do lado do servidor em css inline
    Exemplo (usando PHP):

  • 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);