/ / Как да използвам Foundation 5 с Compass + SASS? - Zurb-фондация, компас-сас

Как да използвате Фондация 5 с Compass + SASS? - Zurb-фондация, компас-сас

Проблемът

Фондация 5 беше пусната миналата седмица, това е страхотно, но новата версия изисква да се използва беседка за използване на F5 със SASS и официалната документация изглежда малко непълна и незряла.

Опитвам се да създам проект, използвайки стъпките, предложени от документите:

[sudo] npm install -g bower

и тогава

gem install foundation

Няма проблеми тук. Проблемът е при създаването на проект "Компас":

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

След компилацията на Compass получавам следната грешка:

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

Конфигурационен файл на Compass (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"

Файлът SASS (app.sass):

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

Проблемът изглежда е в config.rb:

add_import_path "bower_components/foundation/scss"

защото Компас не се опитва да импортира файловете settings и foundation но аз не знам как да го поправя.Всяка помощ ще бъде високо оценена.

Благодаря.

Отговори:

8 за отговор № 1

Трябва да промените линията foundation new MY_PROJECT чрез замяна MY_PROJECT с папката, на която искате да инсталирате проекта. След това потвърдете, че тези папки съществуват в посочената по-горе директория - "bower_components / foundation / scss"

При стартиране на проект тичам compass init и тогава compass watch (в терминала), за да гледате промените на .sass файлове.

лично, Не ходя по този маршрут и го използвам http://koala-app.com/ да конвертирате или "компилирате" моя Sass. Това е БЕЗПЛАТНО и страхотно.


3 за отговор № 2

За това говорихме SASS. Моля, поправете ме, ако греша, но не се нуждаете от долните корици, когато импортирате файл "включване". Създавам отделни файлове за файлове за моите променливи и моите миксове. Те са с префикс и подчертават, което означава "включи" файл. SASS разпознава @import "променливи"; като @import "_variables.scss". Така че, за да бъде ясно, когато е включен файл, само името на файла sass не е необходимо да бъде разширение _ или sss.

Никога не съм поставял долни черти преди да включа файл, който съм нарекъл _filename.scss.

Вероятно има и друг проблем. Вероятно с инсталацията и пътеките за таван. За тези, които добавиха долната част на долната част на клавиатурата в миналото и тя работи ... а просто заобиколи това, което може да се превърне в по-дълбок проблем по пътя. Трябва да проверите инсталацията си.


1 за отговор № 3

Във вашия app.sass файл, променете следния ред

@import "settings";

Да се

@import "_settings";

обяснение

Когато тичаш compass watch имаш грешката

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

Това просто означава, че не може да намери файла с настройкитесе внася. Чрез добавяне на долната част към файла с настройки сте задали правилния път на файла. Ако получите други подобни грешки, уверете се, че файловият път е правилен.


1 за отговор № 4

Мисля, че имах същата грешка; накрая намерих в _settings.scss

Трябва да подчертаете, преди да импортирате функциите

Преди:

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

След:

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

Също така ще трябва да импортирате настройките по същия начин.

В моя пример направих style.scss и импортирах всички SCSS вътре:

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

0 за отговор № 5

Срещнах същия проблем, но за мен решението беше да се промени вносът на настройките app.scss от:

@import "settings";

Да се:

@import "foundation/_settings";

Щом го направите, изпълнете compass watch отново.


0 за отговор № 6

Можете да инсталирате Grunt в проекта си, койтоизползва функцията за часовник на компаса и след това някои други умни неща, за да компилирате вашите задачи и да ги заредите в браузъра! Тук е страхотно урок за това как да го стартирате! (това е толкова просто, колкото създаването на два нови файла в корена на проекта и след това изпълнявате няколко команда от командния ред! Аз сериозно го съветвам!)

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


0 за отговор № 7

Имах същия проблем. За потребителите на Ubuntu 14.04 се уверете, че nodejs и Bower работят правилно. Можете да следвате тези инструкции тук http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283