Pisanie dynamiczny CSS z Jade

Próbuję napisać jakąś dynamiczną CSS korzystając Jade, tak:Pisanie dynamiczny CSS z Jade

style(type='text/css') 
    each item in colors 
     .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }

Jednak to daje następujący błąd:

ReferenceError: media='print') 
    7| style(type='text/css') 
    > 8|  - for(var item in colors) 
    9|   .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 
    10| block Content 
    11|  include scheduleTemplate 

item is not defined

Jeśli usunąć styl Tag, renderuje się dobrze. Czy istnieje sposób korzystania z iteracji w ramach bloku stylu?

Źródło

2012-03-30 Tyler Schroeder

"styl" i "skrypt" powinny akceptować tylko tekst. Nie jestem pewien, dlaczego próbuje przeanalizować swoją iterację. –

Cóż, nie analizuje interakcji, a jedynie próbuje rozwiązać "element" jako zmienną lokalną. Wygląda na to, że zmienne przekazywane do widoku nadal mogą być odwoływane, ale nie można uzyskać żadnych zmiennych wygenerowanych w tym bloku skryptu. –

Ponieważ znaczniki style dopuszczają tylko tekst w Jade, traktują one twój each item in colors jako zwykły tekst. Następnie natrafia na #{item.class} i próbuje je przeanalizować, ale nie działa, ponieważ nie zdefiniowano w poprzednim wierszu wartości item.

Niestety, nie jestem pewien, czy jest dobry sposób na zrobienie tego w Jade. Może po prostu trzeba zdefiniować wszystkie swoje css wyprzedzeniem w JS, a następnie włóż ją tak:

style(type='text/css') 
    #{predefined_css}

W tym momencie jednak, może to być prostsze wystarczy przesunąć stylów do arkusza zewnętrznego, który pobiera generowanego dla każdego użytkownika, a następnie podawaj go z pewnymi rozsądnymi nagłówkami buforowania. Pozwoli to uniknąć trudności z próbą uczynienia Jade dynamicznego CSS i przyspieszyć kolejne ładowanie stron dla użytkowników.

Źródło

2012-03-30 19:32:14

Tak, właśnie tego się obawiałem. Skończyłem na pisaniu plików CSS na klienta i ich dynamicznym odwołaniu. Dzięki za pomoc! –

Można użyć rysika. Wykonane przez tych samych ludzi, którzy stworzyli Jade i jest prawie identyczne z Jade w granicach rozsądku.

Źródło

2012-03-31 10:18:42 Daniel

Wpadłem na podobny problem, w którym chciałem dodać konkretną klasę do znacznika body w zależności od trasy, podobnie do tego, co zrobiłem w PHP. W końcu użyłem dziedziczenia szablonów jadeitu, aby osiągnąć podobny rezultat.

Źródło

2012-08-08 18:12:47 RevNoah

Innym sposobem jest zaimportowanie własnego arkusza stylów CSS. W Jade doc, można zobaczyć, że można dołączyć arkusz stylów z takim kodem:

html 
    head 
    style 
     include style.css

Następnie można zdefiniować dowolną CSS w oddzielnym pliku, który można odwoływać.

Źródło

2015-05-10 19:50:04 Vince

Pisanie dynamiczny CSS z Jade

Odpowiedz

Powiązane problemy