/ / Jak korzystać z Foundation 5 z Compass + SASS? - zurb-foundation, kompas-sass

Jak korzystać z Foundation 5 z Compass + SASS? - zurb-foundation, kompas-sass

Problem

Fundacja 5 został wydany w zeszłym tygodniu, to świetnie, ale nowa wersja wymaga użycia altana za używanie F5 z SASS, a oficjalna dokumentacja wydaje się nieco niekompletna i niedojrzała.

Próbuję utworzyć projekt za pomocą kroków proponowanych przez docs:

[sudo] npm install -g bower

i wtedy

gem install foundation

Żadnych problemów tutaj. Problem polega na utworzeniu projektu Compass:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Po kompilacji kompasu pojawia się następujący błąd:

directory stylesheets/
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
/home/cartucho/MY_PROJECT/scss
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/home/cartucho/MY_PROJECT/bower_components/foundation/scss
Compass::SpriteImporter)
create stylesheets/app.css

Plik konfiguracyjny kompasu (config.rb):

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

Plik SASS (app.sass):

@import "settings";
@import "foundation";
...

Problem wydaje się być w config.rb:

add_import_path "bower_components/foundation/scss"

ponieważ kompas nie może importować plików settings i foundation ale nie wiem, jak to naprawić. Każda pomoc będzie wysoko ceniona.

Dzięki.

Odpowiedzi:

8 dla odpowiedzi № 1

Musisz zmienić linię foundation new MY_PROJECT przez wymianę MY_PROJECT z folderem, w którym chcesz zainstalować projekt. Następnie sprawdź, czy te foldery istnieją w katalogu określonym powyżej - "bower_components / foundation / scss"

Podczas rozpoczynania projektu biegać compass init i wtedy compass watch (w Terminalu), aby obejrzeć zmiany na .sass akta.

OsobiścieNie idę tą drogą i nie używam http://koala-app.com/ przekonwertować lub "skompilować" mój Sass. To jest DARMOWE i niesamowite.


3 dla odpowiedzi № 2

Mówi o tym SASS. Popraw mnie, jeśli się mylę, ale nie potrzebujesz podkreślenia podczas importowania pliku "uwzględnij". Tworzę osobne pliki sass dla moich zmiennych i moich miksów. Są one poprzedzone i podkreślone, co oznacza plik "dołącz". SASS rozpoznaje "zmienne" @import; jako @import "_variables.scss". Tak więc, aby było jasne, gdy jest to plik włączający, tylko nazwa pliku sass nie musi mieć rozszerzenia _ lub _Sss.

Nigdy nie kładłem podkreślenia przed plikiem włączającym, który nazwałem _filename.scss.

Prawdopodobnie istnieje inny problem. Prawdopodobnie z instalacją i ścieżkami dla altan. Dla tych, którzy dodali podkreślenie w przeszłości i zadziałało ... cóż, po prostu omijasz to, co może stać się głębszym problemem na drodze. Musisz sprawdzić swoją instalację.


1 dla odpowiedzi nr 3

W Twoim app.sass plik zmień następujący wiersz

@import "settings";

Do

@import "_settings";

Wyjaśnienie

Kiedy uciekasz compass watch masz błąd

error scss/app.scss (Line 1: File to import not found or unreadable: settings.

Oznacza to po prostu, że nie może znaleźć pliku ustawieńsą importowane. Dodając podkreślenie do pliku ustawień, podałeś poprawną ścieżkę pliku. Jeśli pojawią się inne błędy, sprawdź, czy ścieżka do pliku jest poprawna.


1 dla odpowiedzi nr 4

Myślę, że miałem ten sam błąd; wreszcie znalazłem w _settings.scss

Musisz podkreślić podkreślenie przed importowaniem funkcji

Przed:

// Uncomment to use rem-calc() in your settings
@import "foundation/functions";

Po:

// Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

Musisz również zaimportować ustawienia w ten sam sposób.

W moim przykładzie utworzyłem plik style.scss i zaimportowałem wszystkie SCSS do środka:

@import "foundation/_settings",  "_normalize", "_foundation";

0 dla odpowiedzi № 5

Napotkałem ten sam problem, ale dla mnie rozwiązaniem była zmiana importu ustawień app.scss od:

@import "settings";

Do:

@import "foundation/_settings";

Kiedy już to zrobisz, uciekaj compass watch jeszcze raz.


0 dla odpowiedzi № 6

Możesz zainstalować Grunta w swoim projekcie, którywykorzystuje funkcję zegarka kompasu, a następnie kilka innych sprytnych rzeczy do skompilowania swojego sassu i livereload go w przeglądarce! Oto świetny samouczek, jak go uruchomić! (Jest to tak proste, jak utworzenie dwóch nowych plików w katalogu głównym projektu, a następnie uruchomienie kilku poleceń z wiersza poleceń! Poważnie mu to doradzę!)

http://moduscreate.com/get-up-and-running-with-grunt-js/


0 dla odpowiedzi № 7

Miałem ten sam problem. Dla użytkowników Ubuntu 14.04 upewnij się, że nodejs i Bower działają poprawnie. Możesz postępować zgodnie z tymi instrukcjami tutaj http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283