/ / Як використовувати Foundation 5 з Compass + SASS? - zurb-foundation, компас-сасс

Як використовувати Foundation 5 з компасом + SASS? - zurb-foundation, компас-сасс

Проблема

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

Я намагаюся створити проект за допомогою кроків, запропонованих документами:

[sudo] npm install -g bower

і потім

gem install foundation

Немає проблем тут. Проблема полягає у створенні проекту Compass:

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

Конфігураційний файл компаса (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"

оскільки Compass не намагається імпортувати файли settings і foundation але я не знаю, як це виправити. Будь-яка допомога буде високо оцінена.

Дякую.

Відповіді:

8 для відповіді № 1

Вам потрібно змінити рядок foundation new MY_PROJECT замінивши MY_PROJECT з папкою, в яку ви хочете встановити проект. Після цього, підтвердьте, що ці папки існують у вказаному вище каталозі - "bower_components / foundation / scss"

При запуску проекту біжи compass init і потім compass watch (в терміналі), щоб спостерігати за змінами на .sass файли

Особисто, Я не йду туди і використовую http://koala-app.com/ перетворити або "скомпілювати" мій сасс. Це БЕЗКОШТОВНО та дивовижне.


3 для відповіді № 2

Про це йшлося про САС. Будь ласка, виправте мене, якщо я помиляюсь, але вам не потрібно підкреслити, коли імпортує файл "include". Я створюю окремі файли sass для моїх змінних та мікс-індексів. Вони вказуються і підкреслені, що означає файл "include". SASS визнає @import "змінні"; як @import "_variables.scss". Таким чином, щоб бути чітким, коли це включати файл, то лише ім'я файлу sass не обов'язково має бути _ або розширенням scss.

Я ніколи не став підкресленням перед будь-яким включеним файлом, який я назвав _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