/ / Como usar o Foundation 5 com Compass + SASS? - zurb-foundation, compass-sass

Como usar o Foundation 5 com Compass + SASS? - zurb-foundation, compass-sass

O problema

Fundação 5 foi lançado na semana passada, que é ótimo, mas a nova versão requer usar pavilhão por usar F5 com SASS e a documentação oficial parece ser um pouco incompleta e imatura.

Estou tentando criar um projeto usando as etapas propostas pelos documentos:

[sudo] npm install -g bower

e depois

gem install foundation

Não há problemas aqui. O problema é quando se cria um projeto Compass:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Depois da compilação Compass, recebo o seguinte erro:

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

Arquivo de configuração da bússola (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"

O arquivo SASS (app.sass):

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

O problema parece estar em config.rb:

add_import_path "bower_components/foundation/scss"

porque o Compass falha ao tentar importar os arquivos settings e foundation mas eu não sei como consertar isso. Qualquer ajuda será muito apreciada.

Obrigado.

Respostas:

8 para resposta № 1

Você precisa mudar a linha foundation new MY_PROJECT substituindo MY_PROJECT com a pasta em que você deseja instalar o projeto. Depois disso, confirme se essas pastas existem no diretório que você especificou acima - "bower_components / foundation / scss"

Ao iniciar um projeto corre compass init e depois compass watch (no Terminal) para observar mudanças na .sass arquivos.

Pessoalmente, Eu não vou por esse caminho e uso http://koala-app.com/ para converter ou "compilar" meu Sass. É GRÁTIS e incrível.


3 para resposta № 2

Este é SASS estavam falando. Por favor, corrija-me se eu estiver errado, mas você não precisa do sublinhado ao importar um arquivo "include". Eu crio arquivos sass separados para minhas variáveis ​​e meus mix-ins. Eles são prefixados com sublinhado, o que significa um arquivo "include". O SASS reconhece @import "variáveis"; como @import "_variables.scss". Então, para ficar claro quando se trata de um arquivo de inclusão, apenas o nome do arquivo sass não precisa da extensão _ ou scss.

Eu nunca coloquei um sublinhado antes de qualquer arquivo de inclusão que eu nomeei _filename.scss.

Há provavelmente outro problema acontecendo. Possivelmente com a instalação e os caminhos para o caramanchão. Para aqueles que adicionaram o sublinhado no passado e funcionou ... bem, você apenas ignora o que pode se tornar uma questão mais profunda no caminho. Você precisa verificar sua instalação.


1 para resposta № 3

Na tua app.sass arquivo alterar a seguinte linha

@import "settings";

Para

@import "_settings";

Explicação

Quando você corre compass watch você tem o erro

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

Isso significa apenas que ele não pode encontrar o arquivo de configuraçõessendo importado. Ao adicionar o sublinhado ao arquivo de configurações, você especificou o caminho correto do arquivo. Se você receber algum outro erro como este, verifique se o caminho do arquivo está correto.


1 para resposta № 4

Eu acho que tive o mesmo erro; finalmente encontrei no _settings.scss

Você precisa sublinhar antes de importar as funções

Antes:

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

Depois de:

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

Além disso, você precisaria importar as configurações da mesma maneira.

No meu exemplo eu fiz style.scss e importo todo o SCSS dentro:

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

0 para a resposta № 5

Eu encontrei este mesmo problema, mas para mim a solução foi alterar a importação de configurações em app.scss a partir de:

@import "settings";

Para:

@import "foundation/_settings";

Depois de ter feito isso, corra compass watch novamente.


0 para a resposta № 6

Você pode instalar o Grunt em seu projeto queusa a função de relógio da bússola e, em seguida, algumas outras coisas inteligentes para compilar o seu sass e carregar nele no navegador! Aqui está um ótimo tutorial sobre como colocá-lo em funcionamento! (é tão simples quanto criar dois novos arquivos na raiz do seu projeto e, em seguida, executar alguns comandos de sua linha de comando! Eu aconselho seriamente!)

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


0 para resposta № 7

Eu tive o mesmo problema. Para usuários do Ubuntu 14.04, certifique-se de que os nodejs e o Bower estejam funcionando corretamente. Você pode seguir estas instruções aqui http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283