Jak można importować tylko zmienne i mixiny z arkuszy stylów Scss?

Question

Korzystam z frameworka CSF Zurb Foundation 4 (S) i mam problem ze zduplikowanymi stylami. Dzieje się tak dlatego, że w każdym pliku, który I @import 'foundation' w, wszystkie style z Fundacji są również importowane (zasady dla body, .row, .button i przyjaciół). Prowadzi to do długich czasów kompilacji SCSS i trudnej do nawigacji internetowej konsoli programisty w Chrome, ponieważ wszystkie style Zurb są zadeklarowane cztery lub pięć razy.

Aby to ograniczyć, Utworzyłem plik globals SCSS, który zawiera zmienne na sterowanie ręczne, które wykorzystuje Foundation (jest to kopia wklejony od foundation_and_overrides.scss, to foundation_and_overrides globalnych importu). Importowanie tylko pliku globals.scss pozwala pozbyć się duplikatów tylko w plikach, które nie korzystają z podstawień.

Jest w plikach, które korzystają z miksów Foundation: Czy mogę importować tylko mixiny z pliku SCSS, bez importowania konkretnych stylów Foundation?

Answer 1

Przywóz to wszystko lub nic. Wszystko, co znajduje się w pliku, jest tym, co dostajesz. Jeśli jednak przyjrzeć się źródłu Foundation, istnieją zmienne, które można zmodyfikować, które będą tłumić style emisji (np. W buttons, ustawienie $include-html-button-classes na false spowoduje wyłączenie stylów). Ten wzorzec projektowy jest specyficzny dla Fundacji, nie można oczekiwać, że inne biblioteki będą tworzone w ten sposób.

Podczas importowania fundacji za pośrednictwem @import "foundation", importujesz ten plik: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. Jak widać, importuje inne pliki. Nie musisz importować tego pliku, jeśli nie potrzebujesz wszystkiego: po prostu zaimportuj żądany plik (np. @import 'foundation/components/side-nav' tylko dla pliku bocznej nawigacji).