Crea una variabile nel file .CSS da utilizzare all'interno di quel file .CSS [duplicato]

Question

Possibile duplicato:
Evitare costanti ripetute nei CSS

Abbiamo alcuni "colori del tema" che vengono riutilizzati nel nostro foglio CSS.

C'è un modo per impostare una variabile e quindi riutilizzarla?

Per esempio.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Answer 1

Non è necessario che tutti gli stili di un selettore risiedano in un'unica regola e una singola regola può essere applicata a più selettori...COSÌ giralo:

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

In questo modo eviti di ripetere stili esistenti concettualmente lo stesso, chiarendo anche quali parti del documento interessano.

Notate l'enfasi su "concettualmente" nell'ultima frase...Questo è appena emerso nei commenti, quindi approfondirò un po' l'argomento, dato che ho visto persone fare lo stesso errore più e più volte per anni, prima ancora dell'esistenza dei CSS: due attributi che condividono lo stesso valore non significa necessariamente che rappresentino lo stesso concetto.Il cielo può apparire rosso la sera, e lo stesso vale per i pomodori, ma il cielo e il pomodoro non sono rossi per lo stesso motivo, e i loro colori Volere variare nel tempo in modo indipendente.Allo stesso modo, solo perché ti capita di avere due elementi nel tuo foglio di stile a cui viene assegnato lo stesso colore, dimensione o posizionamento non significa che lo faranno Sempre condividere questi valori.Un designer ingenuo che utilizza il raggruppamento (come descritto qui) o un processore variabile come SASS o LESS per evitare valore la ripetizione rischia di rendere le modifiche future allo stile incredibilmente soggette a errori;concentrarsi sempre su significato contestuale di stili quando si cerca di ridurre la ripetizione, ignorandone gli stili valori attuali.

Answer 2

Puoi ottenerlo e molto altro ancora utilizzando Meno CSS.

Answer 3

No ma Sass fa questo.È un preprocessore CSS, che ti consente di utilizzare molte scorciatoie per ridurre la quantità di CSS che devi scrivere.

Per esempio:

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

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

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

Oltre alle variabili, offre la possibilità di nidificare i selettori, mantenendo le cose raggruppate logicamente:

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

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

C'è più:mixin che agiscono in modo simile a funzioni e la capacità di ereditare un selettore da un altro.È molto intelligente e molto utile.

Se stai codificando in Ruby on Rails, lo compilerà anche automaticamente in CSS per te, ma c'è anche un compilatore generico che può farlo per te su richiesta.

Answer 4

Non sei il primo a chiedertelo e la risposta è no.Elliotte ha un bel sfogo al riguardo: http://cafe.elharo.com/web/css-repeats-itself/.Potresti utilizzare JSP, o il suo equivalente, per generare il CSS in fase di esecuzione.

Answer 5

I CSS non offrono nulla del genere.L'unica soluzione è scrivere uno script di preelaborazione che venga eseguito manualmente per produrre output CSS statico basato su alcuni pseudo-CSS dinamici o che sia collegato al server Web e preprocessi il CSS prima di inviarlo al client.

Answer 6

Questo non è supportato al momento a meno che tu non utilizzi uno script per produrre il CSS basato su alcune variabili definite da te.

Sembra, però, che almeno alcune persone del mondo dei browser lo siano lavorando su di esso.Quindi, se in futuro diventerà davvero uno standard, dovremo aspettare finché non sarà implementato in tutti i browser (fino ad allora sarà inutilizzabile).

Answer 7

Poiché i CSS non lo hanno (ancora, credo che la prossima versione lo avrà), segui il consiglio di Konrad Rudolph per la preelaborazione.Probabilmente vorrai usarne uno già esistente:m4

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

Answer 8

Lo stai rendendo troppo complicato.Questo è il motivo per cui esiste la cascata.Fornisci semplicemente i tuoi selettori di elementi e classifica il tuo colore:

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

Quindi applicalo agli elementi nell'HTML, sovrascrivendo quando è necessario utilizzare i colori del tema.

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

Answer 9

Ho scritto una macro (in Visual Studio) che mi consente non solo di codificare i CSS per i colori con nome, ma di calcolare facilmente sfumature o miscele di tali colori.Gestisce anche i caratteri.Si attiva al salvataggio e genera una versione separata del file CSS.Ciò è in linea con L'argomentazione di Bert Bos che qualsiasi elaborazione dei simboli nei CSS avvenga al momento della creazione, non al momento dell'interpretazione.

La configurazione completa insieme a tutto il codice sarebbe un po' troppo complicata per essere pubblicata qui, ma potrebbe essere appropriata per un post sul blog più avanti.Ecco la sezione dei commenti della macro che dovrebbe essere sufficiente per iniziare.

---

Gli obiettivi di questo approccio sono i seguenti:

1. Consenti colori di base, caratteri, ecc.da definire in una posizione centrale, in modo che un'intera tavolozza o un trattamento tipografico possa essere facilmente modificato senza dover utilizzare la ricerca/sostituzione

2. Evita di dover mappare l'estensione .CSS in IIS

3. Genera file CSS di testo di varietà da giardino che possono essere utilizzati, ad esempio, dalla modalità di progettazione di VisualStudio

4. Genera questi file una volta in fase di creazione, anziché ricalcolarli ogni volta che viene richiesto il file CSS

5. Genera questi file in modo istantaneo e trasparente, senza aggiungere passaggi aggiuntivi al flusso di lavoro di modifica-salvataggio-test

Con questo approccio, i colori, le sfumature di colore e le famiglie di caratteri sono tutti rappresentati con token abbreviati che fanno riferimento a un elenco di valori in un file XML.

Il file XML contenente le definizioni di colore e carattere deve essere chiamato Constants.xml e deve risiedere nella stessa cartella dei file CSS.

Il metodo ProcessCSS viene attivato da EnvironmentEvents ogni volta che VisualStudio salva un file CSS.Il file CSS viene espanso e la versione statica espansa del file viene salvata nella cartella /css/static/.(Tutte le pagine HTML dovrebbero fare riferimento alle versioni /css/static/ dei file CSS).

Il file Constants.xml potrebbe assomigliare a questo:

<?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>

Nel file CSS, puoi quindi avere definizioni come:

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

Answer 10

Guarda anche Evitare costanti ripetute nei CSS.Come ha detto Farinha, è stata avanzata una proposta per le variabili CSS, ma per il momento si desidera utilizzare un preprocessore.

Answer 11

Puoi utilizzare più classi nell'attributo class dell'elemento HTML, ciascuna delle quali fornisce parte dello stile.Quindi potresti definire il tuo CSS come:

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

e quindi combinare le classi come richiesto:

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

Ciò ti consente di riutilizzare la classe ourColor senza dover definire il colore più volte nel tuo CSS.Se cambi il tema, cambia semplicemente la regola per il nostro colore.

Answer 12

Potrebbe sembrare una follia, ma se stai utilizzando NAnt (o Ant o qualche altro sistema di compilazione automatizzato), puoi utilizzare le proprietà NAnt come variabili CSS in un modo complicato.Inizia con un file modello CSS (forse styles.css.template o qualcosa del genere) contenente qualcosa del genere:

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

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

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

Quindi aggiungi un passaggio alla tua build che assegni tutti i valori delle proprietà (utilizzo file di build esterni e li <includo>) e utilizza il filtro <expandproperties> per generare il CSS effettivo:

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

Lo svantaggio, ovviamente, è che devi eseguire il target di generazione CSS prima di poter controllare come appare nel browser.E probabilmente ti limiterebbe a generare tutti i tuoi CSS a mano.

Tuttavia, puoi scrivere funzioni NAnt per fare ogni sorta di cose interessanti oltre alla semplice espansione delle proprietà (come generare dinamicamente file di immagini con gradiente), quindi per me ne è valsa la pena.

Answer 13

I CSS non utilizzano (ancora) variabili, il che è comprensibile data la sua età e il fatto che è un linguaggio dichiarativo.

Ecco due approcci principali per ottenere una gestione dello stile più dinamica:

• Variabili lato server nei CSS in linea
  Esempio (usando PHP):

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

 

• Manipolazione DOM con javascript per modificare css lato client
  Esempi (utilizzando la libreria jQuery):

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

  O

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