Czy mogę utworzyć niestandardowe definicje kolorów, które mogę udostępniać między CSS, JS i HTML?

Question

Mam niebieski kolor, którego chcę używać w wielu miejscach w mojej aplikacji, a obecnie kopiuję i wklejaję między stylami w moim CSS. Czy istnieje sposób definiowania stałej, takiej jak standardowe kolory, "niebieski", "czerwony" itp., Które mógłbym podzielić między moim CSS, moim HTML i moim JS?

Chciałbym móc powiedzieć (gdzieś, korzystnie CSS)

myblue = #33CC99 

w CSS powiedzieć ...

background-color:myblue; 

w HTML powiedzieć ...

<td color="myblue"/> 

oraz w języku JavaScript

tag.style.backgroundColor = myblue; 

Zgaduję, że to niemożliwe, a Google go nie zmieniło, więc czy ktoś ma jakieś pomysły? Wątpię, czy jestem jedyną osobą, która się z tym spotka.

Answer 1

Bardzo obiecującym produktem, który "kompiluje" wyrażeń wyższego poziomu, takich jak zmienne, do kodu CSS jest LESS. Potrzebuje Ruby. Jeszcze go nie używałem, ale zdecydowanie warto się temu przyjrzeć.

Bardziej prymitywnym sposobem na to byłoby użycie języka skryptowego po stronie serwera, takiego jak PHP.

Można by zdefiniować stałe w PHP tak:

define ("MYBLUE", "#33CC99"); 

a następnie wyprowadzanie wartość gdzie potrzebne używając <?=MYBLUE;?>

Big wadę: Aby to zrobić w css zewnętrznych i pliki js, byś oczywiście mieć aby były przetwarzane przez interpreter PHP, co nie jest dobrym rozwiązaniem jeśli masz dużo odwiedzających. W przypadku witryny o małym natężeniu ruchu prawdopodobnie nie ma to znaczenia.

Answer 2

Tak, to niemożliwe. Można jednak napisać własny preprocesor CSS (lub użyć jednego z istniejących tam), na przykład z PHP. Dużym minusem jest to, że można mieć do wyprowadzania COLORCODE na całej swojej stronie PHP i skrypty wyglądałby

tag.style.backgroundColor = <? echo $myblue; ?> 

a także w CSS

lub coś podobnego. I to też nie jest miłe. Oczywiście możesz użyć dowolnie wybranego języka skryptowego serwera. O ile mogę ocenić, jest to jedyna możliwość użycia stałej kolorystycznej na całej stronie internetowej.

Można spojrzeć na niektórych procesorach:

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

Answer 3

Aby to osiągnąć przy użyciu dowolnego dynamicznego CSS (npobsługując plik PHP o treści typu text/css), najlepiej jest oddzielić miejsca, w których definiujesz "motyw".

<script type="text/javascript"> 
    var theme = '#003366'; 
</script> 

Następnie można użyć pliku JavaScript do napisania stylów na podstawie motywów.

Jednakże, jeśli jesteś w stanie użyć pre-procesora CSS, idź z tym. Będziesz miał znacznie większą elastyczność, a kod będzie łatwiejszy w utrzymaniu. Prawie zawsze używam strony PHP lub JSP dla CSS.

Answer 4

Możesz spojrzeć na HAML + SASS. Chociaż nie można zdefiniować zmiennych dla wszystkich trzech języków naraz, te dwa mogą znacznie ułatwić pisanie HTML + CSS.

Answer 5

W jaki sposób podchodzę do tego, to zrobić zajęcia w moim CSS.

.color_class {color: #33CC99;} 

Następnie nazwać to w moim HTML

<td class="color_class" /> 

można przypisać wiele klas do elementu HTML.

W JS, tylko wymienić klasę

document.getElementById('id').className = 'color_class'; 

oczywiście można grać z jak chcesz, aby wybrać element. Biblioteka JS prawdopodobnie ma jeszcze łatwiejsze metody przypisywania klas CSS.

Answer 6

Jak zauważyli inni użytkownicy, nie można tego zrobić w prostym kodzie HTML, JS lub CSS, chyba że przekazuje się wszystkie treści HTML, JS i CSS za pośrednictwem skryptu CGI/PHP/ASP - co nie jest tak złe jak jest łatwy w utrzymaniu.

Jeśli używasz ciągu zapytania w odsyłaczu do dołączonych plików CSS/JS - np. "/css/stylesheet.php?timestamp=2010-01-01+00:00:00", wtedy prawie wszyscy klienci będą agresywnie buforować twoje pliki CSS/JS, negując jakikolwiek wpływ na ładowanie ich parsowania w języku skryptowym może mieć (ale chyba, że ​​strona będzie prawdopodobnie szczególnie zajęta, nie byłbym zbytnio związany z tym tematem).

Jeśli używasz Apache (co jest prawdopodobne), alternatywnym podejściem byłoby użycie czegoś takiego jak mod_set, aby ponownie napisać dla ciebie wszystkie pliki HTML, JS i CSS w locie. Może to być trudniejsze do obsługi, jeśli nie znasz konfiguracji Apache (lub używasz innego serwera WWW).

W odniesieniu do skuwki nazewnictwa:

albo podejście I silny sugerują użyciem jasnego systemu znakowania do oznaczania zmiennych dynamicznych (np% MyBlue%) oraz do rozważenia konieczności zmienne nazwy być reprezentatywne (np% HeadingBackgroundColor% % FontColor%, nawet jeśli oba są ustawione na% MyBlue%), ponieważ może to zapobiec późniejszemu owłosieniu (kiedy odkryjesz, że zmiana jednej wartości ma zamierzone konsekwencje).

Używanie bardziej reprezentatywnych nazw może na pierwszy rzut oka wydawać się zbędne, ale w wielu przypadkach powoduje problemy, ponieważ kolory kończą się w niezamierzony sposób, gdy znacznie różnią się od oryginalnego schematu (dotyczy to dużej części głównego oprogramowania który jest przenośny - ponieważ autor założył, że% value1% i% value2% zawsze idą w parze, a więc wartość% 1% i% value3% - co oznacza, że ​​opcje do kompozycji są poważnie ograniczone przez niezamierzoną zależność).

Answer 7

Robię to w czasie kompilacji, uruchamiając moje pliki CSS przez Freemarker.

Answer 8

W CSS nie ma pojęcia "zmiennych", ale zdecydowanie zalecam, aby , a nie robić to, co robisz. nie ma powodu, dla którego nie można zdefiniować wszystkich informacji o swoim stylu w arkuszu CSS jako klas CSS. Jeśli to zrobisz, a następnie po prostu zastosujesz wspomniane klasy w html i javascript, jest to jeden z głównych problemów w zakresie kopiowania i wklejania.

Po drugie, pamiętaj, że możesz zdefiniować więcej niż jedną klasę CSS dla elementu, np.

<div class='blue-text white-background'>my content</div> 

Następnie można zdefiniować te independantly w CSS, a la:

.blue-text { color : Blue; } 
.white-background { background-color: white;} 

i można nawet tworzyć reguły, które wprowadzone dopiero, gdy oba są applyed:

.blue-text.white-background { color : AliceBlue; } 

Jeśli chcą mieć dynamicznie generowane wybory kolorów, jedynym sposobem jest to, jak sugerowali inni, czyli albo przetworzyć pliki przed wdrożeniem, albo CSS wygenerować dynamicznie d serwowane przez twój wybrany język.

Answer 9

Nie jestem pewien twojego celu końcowego. Jeśli ma to pozwolić na wybór jednego z kilku tematów dla strony internetowej, można po prostu mieć wiele plików CSS oraz plik cookie/zmienną sesji/bazę danych z preferowanym arkuszem stylów użytkownika. Następnie można po prostu zrobić

<link rel=<? echo stylepref; ?> type='text/css'> 

lub coś wzdłuż tych linii

Jeśli chcesz, aby móc w pełni dostosować witrynę, a następnie jedną z powyższych odpowiedzi byłyby potrzebne.

Answer 10

w czystej stronie klienta grupowania selektorów CSS pozwala umieścić ten sam kolor na wiele różnych elementów:

p, .red, #sub, div a:link { color: #f00; }