2015-06-28 9 views
7

Witryna, nad którą pracuję, korzysta z potoku zasobów szyn i pliku application.scss do importowania i przetwarzania różnych plików CSS.Jak uniknąć wielu @importów zmiennych SASS?

Jednak niektóre arkusze stylów są używane w określonych miejscach, a dla tych nie ma sensu importowanie ich do globalnego manifestu. Jednak importowanie ich wymaga importowania zmiennych.scss i prawdopodobnie mixins.scss do samego arkusza (aby były one przetwarzane poprawnie), co powoduje powstanie duplikatu kodu w ostatecznym css.

Czy istnieje sposób, aby w zasadzie powiedzieć preprocesorowi - "Zaufaj mi, zmienna/mixin, które widzisz zostanie zdefiniowany, zanim wszystko zostanie przetworzone"?

W przeciwnym razie nie widzę ho, aby uniknąć importowania każdego arkusza do jednego manifestu, który wydaje się nadęty.

Dzięki.

+0

Możliwe duplikaty: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss, http: // stackoverflow.com/questions/18408324/how-can-one-import-only-variables-and-mixins-from-scss-stylehsheets, http://stackoverflow.com/questions/24182734/how-to-avoid-duplication-of- styles-in-scss – cimmanon

+0

Nie jestem do końca pewien, czy to rozumiem, jeśli posiadasz pliki, które zawierają tylko mixiny i zmienne, powinieneś być w stanie uwzględnić je tak często, jak chcesz bez żadnego nadęcia? Żadna rzecz nie powoduje kompilacji css –

+0

Tak więc użycie np. @import "/ mixins"; na początku pliku css nie ma już skompilowanego kodu, a nie importowania? Po prostu pozwala na kompilację css? W takim razie. świetnie i dzięki! –

Odpowiedz

1

Krótka odpowiedź na twoje pytanie brzmi: nie. Zmienne muszą być zdefiniowane w logicznej kolejności od momentu, w którym zostaną wywołane podczas kompilacji. To jak scenariusz "kurczak i jajko".

Z tego, co mogę stwierdzić w twoim opisie, projekt, nad którym pracujesz, nie tworzy jednolitego obiegu pracy, lecz dzieli się na modułowe części związane z twoją strukturą plików. Jeśli tak jest, to co możesz zrobić na początku każdego pliku, odwołaj się do pliku zmiennych z katalogu głównego.

W normalnym obiegu, należy zaimportować pliki SCSS oparty na zdefiniowanej hierarchii tak:

Sass/style.scss

/* Main Stylesheet */ 

@import "variables"; 
@import "mixins"; 

/* Modular Sections */ 
@import "layout/header"; 
@import "layout/body"; 
@import "layout/footer"; 

by skompilować się do jednego arkusza style.css z polecenie sass sass/style.scss:style.css

Zakładam, że twój projekt ma wszystkie pliki /* Modular Sections */ skompilowane do własnych plików CSS.

układ/header.scss

/* Header Stylesheet */ 
@import "../variables"; 
@import "../mixins"; 

Biorąc pod uwagę strukturę plików, który przypomina:

/root 

    style.scss 
    variables.scss 
    mixins.scss 

    /layouts 

    header.scss 
    body.scss 
    footer.scss 

To wszystko wydaje się trochę głupie jednak. Nie znam wszystkich parametrów, które trafiają do twojej obecnej kompilacji sass, ale polecam używanie zunifikowanego przepływu pracy.

1

Można użyć podszablonów więc kompilator nie spróbuje zinterpretować zmiennych itp

Zasadniczo, zmiana nazwy plików, które nie chcę kompilator do interpretacji - ale będzie być dostępna, gdy kompilowany - - z podkreśleniem przed nazwą pliku.

np. _filename.scss

Powiązane problemy