SASS i Zurb Foundation - mylące instrukcje instalacji

Question

Postanowiłem użyć wersji Sass Foundation4, ponieważ obecnie jest ona praktycznie niemożliwa do przeprowadzenia.

I przestrzegać instrukcji tutaj: http://foundation.zurb.com/docs/sass.html

nich poradził mi, aby zainstalować gem (bez problemu), a następnie zainstalować kompas następnie stworzyć projekt, który zrobiłem w wwwroot.

Wszystko co dobre jak dotąd. Następnie doradza mi, aby "pobrać pliki z Github (pobrać pliki scss/i js/katalogi) i umieścić je w katalogu projektu"

Dlaczego więc w imieniu ryby na rowerze instrukcje doradzić mi, aby to zrobić, gdy poprzedni krok w wierszu poleceń (kompas create -r zurb-foundation - using foundation) tworzy folder już w katalogu głównym dla mojego projektu - choć inaczej nazwany - który zawiera podobne, jeśli nie identyczne pliki? Istnieje już folder "javascripts" z podfolderami "foundation" i "vendor", które zawierają w dużej mierze te same pliki - chociaż niektóre mają różne rozmiary.

Czy brakuje mi czegoś? Dołączony plik "index.html" odwołuje się do folderu "javascripts", więc dlaczego mam zamiar dołączyć "js" z github? To bardzo mylące, gdy jesteś nowy w tej technologii!

Po wykonaniu instrukcji instalacji mam teraz pliki "foundation.scss" i "app.scss", które wydają się być w dużej mierze takie same, z wyjątkiem jednego (app.scss), z którego zostały zakomentowane. Którego mam użyć?

Wydaje mi się, że instrukcje są zasadniczo nieaktualne. Wygląda na to, że nie potrzebuję "js" z github, ale potrzebuję "scss". Zawartość tego folderu scss wygląda na to, że musi przejść do folderu "sass" utworzonego podczas tworzenia projektu, a plik "foundation.scss" można usunąć, ponieważ "app.scss" jest jego kopią.

Nie mam pojęcia, gdzie podstawowy plik "app.scss" ma nadzieję na "@import foundation", ponieważ nie ma folderu "foundation" utworzonego podczas instalacji/tworzenia projektu. Może brakuje mi czegoś, ale to wszystko jest bardzo mylące. Czy ktoś mógłby wyjaśnić, od czego muszę zacząć i co mogę usunąć/zignorować?

Answer 1

Po zainstalowaniu gem wszystkie właściwe pliki Foundation są instalowane w pamięci podręcznej gem. Compass przeniesie wszystkie pliki F4 SCSS do projektu za pośrednictwem dyrektywy @import z foundation.scss.

Dokumentacja projektu w repozytorium Github zawiera najnowsze instrukcje dotyczące budowania projektu F4: Compass. https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

Brzmi jak jesteś mieszanie Samodzielny instrukcje do nich kompas.

Jeśli uruchomić to:

[sudo] gem install compass 
cd path/to/where-you-want-your-project 
run compass create <project-name> -r zurb-foundation --using foundation 

Nie trzeba GitHub lub instrukcje autonomicznym.

Poniższa procedura opisuje ręczne etapy budowy projektu F4. Myślę, że utknąłeś na KROK 4, więc skup się na tej części.

KROK 1:

Pobierz za łatwym dostępem te dwa archiwa:

Foundation Vanilla:

http://foundation.zurb.com/files/foundation-4.1.6.zip

Fundacja Mistrz:

https://github.com/zurb/foundation/archive/master.zip

CD do katalogu www root:

Krok 2:

Tworzenie ten plik

/config.rb

require 'zurb-foundation' 
http_path = "/" 
css_dir = "css" 
sass_dir = "scss" 
images_dir = "img" 
javascripts_dir = "js" 
output_style = :expanded 
relative_assets = true 
line_comments = true 

Przełącz output_style = :compact or :compressed i line_comments = false dla Produkcja (po uruchomieniu).

KROK 3:

• Kopiuj/Przenieś index.html z Foundation Vanilla do katalogu głównego www.
• Edytuj line 11 i zmień foundation.css na app.css w tagu stylu.

KROK 4:

Utwórz ten katalog i plik:

/SCSS/

• Tworzenie app.scss - To jest twoja strona/app stylów, a my ll importuj Normalize i F4 w nim.

• Skopiuj do niego:

  // Global Foundation Settings 
  // @import "settings"; 
  
  // Comment out this import if you don't want to use normalize 
  @import "normalize"; 
  
  // Comment out this import if you are customizing you imports below 
  @import "foundation"; 
  
  // Your own SCSS here... 
  

Jeśli chcesz ręcznym niektóre zmienne F4 Sass trzeba plik _settings.scss. Na razie pominęłbym ten krok i zostawiam go skomentowanym do czasu, aż lepiej poznasz F4.

KROK 5:

Tworzenie tego katalogu (pliki automatycznie tutaj napisane):

/CSS/

• app.css - zostaną napisane z /scss/app.scss przez Compass. Normalizuj i cały F4 CSS będzie w nim, plus każdy twój własny CSS, który dodałeś.

Dzieje się to automatycznie, nie musisz robić nic poza mieć zainstalowane wymagane kamienie i kompas plik konfiguracyjny z STEP 2.

KROK 6:

Tworzenie tego katalogu i kopiuj/przenieść te pliki do niego:

/js/

• Kopiuj/Przenieś /js/foundation.min.js z Foundation Vanilla pobierz tutaj.

• Jeśli potrzebujesz własnego app.js, utwórz/umieść go tutaj i dodaj do niego ostatnią w swojej stopce.

/js/sprzedawca/

• Kopiuj/Przenieś /js/vendor/custom.modernizr.js z Fundacji Vanilla pobrania się tutaj.

• Kopiuj/Przenieś /js/vendor/zepto.js i /js/vendor/jquery.js z Foundation Vanilla pobrać tutaj.

Później, kiedy czujesz się bardziej komfortowo, można wybierać poszczególne pliki wiśnia Fundacja JS od Fundacji Mistrza i złączyć je w mniejszym lib tutaj jako foundation.min.js.

To powinno wystarczyć.

Sprawdź ten plik w moim www repo, jak to pokazuje konfigurację F4 robocza: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

Można też grzebać tam jak zintegrować Grunt.js do zautomatyzowanej produkcji w SCSS i JS z konkatenacją i zminimalizowaniem: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

Nie będąc tak biegły jak @jhauraw zauważyłem coś innego.

Zainstalowałem aplikację FOundation za pomocą aplikacji Compass. Będąc nowicjuszem z Compass, również szukałem folderu "fundacji", który zawierałby wszystkie różne pliki Foundation SCSS. Kiedy spojrzałem na plik _settings.scss, który był obecny, okazało się, że wszystko zostało skomentowane. Co wiem, rozumiem (nadal jako początkujący w stosunku do Compass) jest to, że plik "fundacyjny" żyje w bibliotece zasobów w programie Compass. W razie potrzeby pliki te są importowane podczas generowania pliku CSS. Plik _settings.scss ze wszystkimi skomentowanymi polami jest plikiem zastępującym. Jeśli więc usuniesz komentarze do konkretnej zmiennej lub mixin, zastąpi ona oryginały ukryte w bibliotece Compass. Skompilowany CSS wydaje się zawierać wszystko, co jest potrzebne.