Czy "kompas" programu @import obejmuje całą strukturę?

Question

Zacząłem importować współdzielone rzeczy, takie jak zmienne i mixiny w jednym miejscu - plik manifestu css. Teraz importuję niektóre mixsy Compass, używając bezpośredniej ścieżki do plików.

Moje pytanie brzmi, czy przy użyciu @import 'compass' wstrzyknięto całą strukturę do pliku application.css, czy jest to robione przez wyszukiwanie w plikach sass, a następnie zaimportowanie tylko potrzebnych miksów?

Nie chcę uwzględniać wszystkiego.

Answer 1

Zgodnie z the docs@import 'compass' zaimportuje moduły CSS3, Typography i Utilities. Moduły te nie będą niczego wstrzykiwać do twojego wyjściowego CSS, zawierają tylko mixiny.

Ograniczając import do konkretnego modułu lub modułu częściowego (tj. @import 'compass/css3/image'), skrócisz czas wymagany do skompilowania plików SASS do CSS.

---

Na przykład, pozwala utworzyć dwa pliki.

// all.scss 

@import "compass"; 

.candy { 
    @include background(linear-gradient(top left, #333, #0c0)); 
} 

// module.scss 

@import "compass/css3/images"; 

.candy { 
    @include background(linear-gradient(top left, #333, #0c0)); 
} 

Gdybyśmy je (compass compile sass/FILENAME.scss) sporządza, wynik będzie identyczny CSS:

.candy { 
    background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)); 
    background: -webkit-linear-gradient(top left, #333333, #00cc00); 
    background: -moz-linear-gradient(top left, #333333, #00cc00); 
    background: -o-linear-gradient(top left, #333333, #00cc00); 
    background: linear-gradient(top left, #333333, #00cc00); 
} 

Teraz pozwala dodać --time argument polecenia kompilacji i porównać wyniki. W przypadku mojej maszyny kompilacja all.css trwała 1,516 s, a dla module.css tylko 0,108 s.