Ho un foglio di stile e molti stili con lo stesso colore del bordo (#CCCCCC per la precisione).Come posso riutilizzare un colore in un foglio di stile?
C'è un modo per specificare un qualche tipo di variabile e riutilizzo che, così invece di digitare #CCCCCC più e più volte, posso digitare:
border: 1px solid $bordercolor;
P.S. Sto usando ASP.NET MVC.
Non che io sappia, ma si potrebbe generare il CSS da una pagina di .NET.
Quindi chiamare con
E StyleSheet.aspx sarebbe simile
<%@ Page Language="C#" %>
H1
{
background-color:<%= MyColourVariable %>;
}
La creazione dinamica di un file css impedisce la memorizzazione nella cache? – Jens
Jens, no. La memorizzazione nella cache dipende dal tipo di mime dell'asset servito e dalle proprietà specifiche sulla risorsa visualizzata dal browser, che variano a seconda del browser, per determinare se la cache è senza dati. –
E si può sempre aggiungere il caching della pagina se si desidera controllarlo sul lato server (quindi non viene ricreato sul server ogni volta) http://support.microsoft.com/kb/308375 – CaffGeek
È possibile impostare lo stile del bordo per un tag principale. Ad esempio, se ogni elemento nel tuo #content utilizza queste proprietà del bordo, puoi applicare lo stile del bordo desiderato a #content stesso.
Estendere lo stile all'interno del colore è definito
LE: vedere l'esempio da KennyTM
-1: nessun contenuto reale. – ANeves
.classA, .classB, .classC {
border-color: #CCC;
}
.classA {
border-width: 1px;
border-style: solid;
}
...
Ma si può' t utilizzare la sintassi per le scorciatoie per definire il bordo più.
Bello, in realtà non lo uso, mettendo i selettori più di una volta nel foglio di stile. sto vedendo questo come codice CSS inverso: non dire "classA è border-color this e font that", ma dire "border-color questo è applicato a ClassA e ClassB e font che viene applicato alla Classe C". Molto bella. – Michel
Faccio regolarmente questo tipo di cose, se non voglio bordi su tutti i lati, cioè 'border-width: 1px 0; border-style: solido; border-color: # ccc' – DisgruntledGoat
Un elemento può avere più classi assegnate. Così si potrebbe creare uno stile che definisce si Colore bordo e utilizzarlo in combinazione con altre classi per altri attributi:
.bordercolor { border-color:#CCCCCC; }
<div class="bordercolor otherstyle">
Puoi servire il tuo CSS come file php con il tipo text/css. Quindi in questo modo puoi usare tutte le variabili PHP che vuoi. Funziona su tutti i browser. Ecco un esempio:
Non si può davvero definire le variabili in CSS, ma si può fare una sorta di cosa siete dopo alcuni modi. Innanzitutto, puoi applicare più classi al tuo elemento e mantenere il colore nella propria classe.
.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }
<div class="myBorderColor myOtherClass">content</div>
L'altra alternativa è quella di collegare in cascata in realtà gli stili così viene applicato più di 1 isolato.
div.a { font-weight: bold; }
div.b { color: #cccccc; }
div.a div.b { border-color: #000000; }
In questo modo si controlla ancora il colore da 1 posto.
Assicurati solo di non seguire lo stile utilizzato dal nostro web designer e di assegnare un nome alle classi "fontbold" e "borderblack"/"bordergray"/"borderblue" ... Questo stile è davvero pessimo i nomi dovrebbero dire come è usato, non come appare. – dbemerlin
L'uso di una classe '.myBorderColor' è esattamente ciò a cui dbmerlin fa riferimento. – ANeves
@dbemerlin Penso che quando inizierò ad applicare questa tecnica sarei tentato anche di usare nomi come borderblue e borderblack, perché penso che all'inizio sarebbe facile usare questo tipo di nomi invece di nomi più descrittivi. Ma hai ragione, non è la strada da percorrere. – Michel
Penso che potresti riferirti a CSS variables. Sfortunatamente non sono ben supportati.
Sarebbe bello * se * fosse supportato ... –
Sì! ma in effetti, purtroppo ... – Michel
Un numero di persone ha fatto HttpHandler che aggiunge supporto variabile al CSS.Fondamentalmente, HttpHandler si occupa di sostituire le variabili con i loro valori prima che il client veda il CSS. Gli esempi includono:
Questo sarà certamente il lavoro. Non l'ho provato in nessuna delle mie applicazioni, quindi non posso parlare delle implicazioni sulle prestazioni.
Si potrebbe anche utilizzare un CSS "di livello superiore". Sass e Less offrono entrambe le variabili. Funzionano scrivendo in un linguaggio che è un superset di CSS e quindi lo si compila nei CSS durante il test/distribuzione. Ci sono degli hook per RoR per entrambi, ce ne potrebbe essere uno per asp.net.
cool. Meno sembra molto promettente. – Michel
Devo dire che Sass ha una sintassi alternativa che è simile ai CSS. –
Stavo pensando anche al modello T4. È solo Visual Studio, quindi non è il modo più generico di andare, ma ho pensato di condividerlo.
<#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" language="C#v3.5" debug="true" hostSpecific="true" #>
<#@ output extension=".css" #>
<# string font = " font-family: Verdana, Helvetica;\n\tfont-size: 11px;";#>
body {
<#= font #>
}
table.Bid {
background-color:red;
<#= font #>
}
Questo genera un file test.css con questo contenuto:
body {
font-family: Verdana, Helvetica;
font-size: 11px;
}
table.Bid {
background-color:red;
font-family: Verdana, Helvetica;
font-size: 11px;
}
In Rails, questo funziona grande per me:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
forse si potrebbe scrivere un pre simile -processore per il framework .NET ..?
Non che ne sia a conoscenza, ma è possibile generare il CSS da una pagina .NET. (Aggiunta risposta sotto con un maggior dettaglio) – CaffGeek
+1 Domanda eccellente. Ho anche questo problema. –
Non so se è applicabile (e l'ho usato a malapena), ma Sass (http://sass-lang.com/) sembrerebbe coprire questo. È scritto in Ruby (credo), ma ora * è * IronRuby ... –