Chciałbym zmienić tło strony i inne kolory. Na mojej stronie internetowej znajduje się moduł „Ustawienia”. Zasadniczo zapisuję kolory z tego modułu. Używam miksu Laravel do kompilacji plików scss.

SAAS files
1) _variable.scss (All variables define here like $primary-color, $secondary-color etc.)
2) _common.scss
3) app.scss

Chciałbym zdynamizować $primary-color & $secondary-color.

Próbowałem już wielu pakietów kompozytorskich, aby zrobić te rzeczy, ale nie odniosłem żadnego sukcesu. Próbowałem tego: https://leafo.net/scssphp/

0
Mayank Dudakiya 18 grudzień 2019, 22:15

2 odpowiedzi

Często łatwiej jest wstawić style / CSS przechowywane w bazie danych do aplikacji za pomocą JavaScript.

Jeśli to nie jest możliwe, powinieneś być w stanie przechowywać CSS w bazie danych jako blok kodu CSS, a następnie wyprowadzić CSS w tagu style w nagłówku dokumentu.

Kompilowanie stylów przechowywanych w bazie danych w SASS jest opcją, ale wymagałoby to adaptera, aby umożliwić skryptowi kompilacji / pakietowi WWW dostęp do bazy danych.

0
Ryan Charmley 18 grudzień 2019, 23:02
Jest to głównie projekt oparty na SAAS, więc muszę użyć miksu Laravela do kompilacji domieszek SAAS i zmiennych. Dziękuję :)
 – 
Mayank Dudakiya
18 grudzień 2019, 23:31

A co ze zmiennymi CSS? Obsługuje ją większość nowoczesnych przeglądarek: https://caniuse.com/#feat=css-variables.

Wszystko, czego potrzebujesz, to wstrzyknąć styl do głównego szablonu ze zmiennymi niestandardowymi z modułu Ustawienia.

Najpierw przekaż ustawienia do widoku ostrza:

$settings = Settings::getForCurrentUser(); // or something like that.
return view('layout.base', compact('settings'));

W layout.base dodaj style i przekaż zmienne w:

<style>
root {
  --primary-color: {{ $settings['primaryColor'] }};
  --secondary-color: {{ $settings['secondaryColor'] }};
  --header-color: {{ $settings['headerColor'] }};
  /* etc. */
}
</style>

Aby uzyskać dostęp do zmiennych css, musisz wywołać funkcję var(). Zmień zmienne scss z $primary-color na:

app.scss:

button {
  background-color: var(--primary-color);
}
button.secondary {
  background-color: var(--secondary-color);
}

Wadą tego rozwiązania jest to, że nie można używać wbudowanych funkcji scss, takich jak lighten(var(--primary-color), 15%), ponieważ nie istnieją one dla kompilatora scss - można ich używać tylko po stronie klienta.

1
Daniel 19 grudzień 2019, 01:12