Utwórz zmienną w.Plik CSS do wykorzystania w tym.Plik CSS [duplikat]

Możesz to osiągnąć i wiele więcej używając Less CSS .

Nie, ale Sass robi to. Jest to preprocesor CSS, pozwalający na użycie wielu skrótów, aby zmniejszyć ilość CSS, które musisz napisać.

Na przykład:

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

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

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

Poza zmiennymi, zapewnia możliwość zagnieżdżania selektorów, zachowując logicznie pogrupowane rzeczy:

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

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

Jest więcej: mixiny, które działają jak funkcje i możliwość dziedziczenia jednego selektora od drugiego. Jest bardzo sprytny i bardzo przydatny.

Jeśli kodujesz w Ruby on Rails, to nawet automatycznie skompilować go do CSS dla ciebie, ale istnieje również kompilator ogólnego przeznaczenia, który może to zrobić dla Ciebie na żądanie.

Nie jesteś pierwszym, który się zastanawia i odpowiedź brzmi: nie. Elliotte ma fajną gadkę: http://cafe.elharo.com/web/css-repeats-itself / . możesz użyć JSP, lub jego odpowiednika, aby wygenerować CSS w czasie wykonywania.

CSS nie oferuje niczego takiego. Jedynym rozwiązaniem jest napisanie skryptu wstępnego przetwarzania, który jest uruchamiany ręcznie w celu wytworzenia statycznego wyjścia CSS opartego na jakimś dynamicznym pseudo-CSS, lub który jest podłączony do serwera WWW i preprocesuje CSS przed wysłaniem go do klienta.

To nie jest obecnie obsługiwane, chyba że użyjesz jakiegoś skryptu do wytworzenia CSS w oparciu o określone przez Ciebie zmienne.

Wydaje się jednak, że przynajmniej niektórzy ludzie ze świata przeglądarki pracują nad tym . Tak więc, jeśli kiedyś stanie się standardem, będziemy musieli poczekać, aż zostanie zaimplementowany we wszystkich przeglądarkach (do tego czasu będzie bezużyteczny).

Ponieważ CSS tego nie ma (jeszcze wierzę, że następna wersja będzie), postępuj zgodnie z radami Konrada Rudolphsa w zakresie preprocesingu. Prawdopodobnie chcesz użyć takiego, który już istnieje: m4

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

Komplikujesz to. To jest powód, dla którego istnieje kaskada. Wystarczy podać selektory elementów i klasy koloru:

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

Następnie zastosuj go do elementów w HTML, nadpisując, gdy musisz użyć kolorów motywu.

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

Napisałem makro (w Visual Studio), które pozwala mi nie tylko kodować CSS dla nazwanych kolorów, ale także łatwo obliczać odcienie lub mieszanki tych kolorów. Obsługuje również czcionki. Zostanie on wywołany przy zapisie i wyprowadzi oddzielną wersję pliku CSS. Jest to zgodne z argumentem Berta Bosa , Że jakiekolwiek przetwarzanie symboli w CSS odbywa się w punkcie tworzenia, A Nie Nie w punkcie interpretacji.

Pełna konfiguracja wraz z całym kodem byłaby zbyt skomplikowana, aby opublikować tutaj, ale może być odpowiedni dla posta na blogu w dół drogi. Oto sekcja komentarzy z makra, która powinna wystarczyć, aby zacząć.

Cele tego podejścia są następujące:

1. Zezwalaj na kolory podstawowe, czcionki itp. do zdefiniowania w centralnej lokalizacji, tak aby cała paleta lub obróbka typograficzna mogła być łatwo poprawiona bez konieczności używania search/replace

2. Unikaj konieczności mapowania .CSS extension in IIS

3. Generowanie plików tekstowych CSS, które mogą być używane na przykład przez Tryb projektowania VisualStudio

4. Generuj te pliki raz w czasie tworzenia, zamiast przeliczać je za każdym razem, gdy żądany jest plik CSS

5. Generuj te pliki natychmiast i przejrzyście, bez dodawania dodatkowych kroków do obiegu pracy tweak-save-test

Przy takim podejściu kolory, odcienie kolorów i rodziny czcionek są reprezentowane za pomocą skróconych tokenów, które odnoszą się do listy wartości w pliku XML.

Plik XML zawierający definicje kolorów i czcionek musi być nazywany stałymi.xml i musi znajdować się w tym samym folderze co Pliki CSS.

Metoda ProcessCSS jest wywoływana przez EnvironmentEvents za każdym razem, gdy VisualStudio zapisze plik CSS. Plik CSS jest rozwijany, A Rozszerzona, statyczna Wersja pliku jest zapisywana w folderze/css/ static/. (Wszystkie strony HTML powinny odwoływać się do /css / static/ wersje plików CSS).

Stałe.plik xml może wyglądać mniej więcej tak:

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

W pliku CSS możesz mieć definicje takie jak:

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

Zobacz także unikanie powtarzających się stałych w CSS. Jak powiedział Farinha, propozycja zmiennych CSS została złożona, ale na razie chcesz użyć preprocesora.

Możesz używać klas mutliple w atrybutach klasy elementu HTML, z których każda zawiera część stylizacji. Możesz więc zdefiniować swój CSS jako:

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

A następnie połącz klasy zgodnie z wymaganiami:

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

To pozwala na ponowne użycie klasy ourColor bez konieczności definiowania wielokrotności kolorów w CSS. Jeśli zmienisz motyw, po prostu zmień regułę dla ourColour.

Może to zabrzmieć jak szaleństwo, ale jeśli używasz NAnt (lub Ant lub innego zautomatyzowanego systemu budowania), możesz używać właściwości nant jako zmiennych CSS w trudny sposób. Zacznij od pliku szablonu CSS (może stylów.css.szablon czy coś) zawierający coś takiego:

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

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

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

A następnie dodaj krok do swojej kompilacji, który przypisuje wszystkie wartości właściwości (używam zewnętrznych plików buildfiles i them) I używa filtra do generowania rzeczywistych CSS:

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

Minusem jest oczywiście to, że musisz uruchomić cel generowania css, zanim będziesz mógł sprawdzić, jak wygląda w przeglądarce. I prawdopodobnie ograniczyłoby to cię do ręcznego generowania całego css.

Można jednak pisać funkcje NAnt do robienia różnego rodzaju fajnych rzeczy poza tylko rozszerzaniem właściwości (np. dynamiczne generowanie gradientowych plików graficznych), więc dla mnie było to warte zachodu.

CSS nie używa (jeszcze) zmiennych, co jest zrozumiałe ze względu na swój wiek i jest językiem deklaratywnym.

Oto dwa główne podejścia do osiągnięcia bardziej dynamicznej obsługi stylu:

• zmienne po stronie serwera w inline css
  Przykład (przy użyciu PHP):

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

• Manipulacja DOM z javascript, aby zmienić css po stronie klienta
  Przykłady (przy użyciu biblioteki jQuery):

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

  Lub

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