/ / ¿Cómo usar Foundation 5 con Compass + SASS? - zurb-foundation, compass-sass

¿Cómo usar Foundation 5 con Compass + SASS? - zurb-foundation, compass-sass

El problema

Fundación 5 fue lanzado la semana pasada, eso es genial, pero la nueva versión requiere usar cenador para usar F5 con SASS y la documentación oficial parece ser un poco incompleta e inmadura.

Intento crear un proyecto siguiendo los pasos propuestos por los documentos:

[sudo] npm install -g bower

y entonces

gem install foundation

No hay problemas aqui El problema es cuando se crea un proyecto de Compass:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Después de la compilación Compass, aparece el siguiente error:

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

Archivo de configuración de 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"

El archivo SASS (app.sass)

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

El problema parece estar en config.rb:

add_import_path "bower_components/foundation/scss"

porque Compass no puede intentar importar los archivos settings y foundation pero no sé cómo solucionarlo. Cualquier ayuda será muy apreciada.

Gracias.

Respuestas

8 para la respuesta № 1

Debes cambiar la linea foundation new MY_PROJECT por reemplazo MY_PROJECT con la carpeta en la que desea instalar el proyecto. Después de eso, confirme que estas carpetas existen en el directorio que especificó anteriormente - "bower_components / foundation / scss"

Al comenzar un proyecto correr compass init y entonces compass watch (en Terminal) para ver los cambios en el .sass archivos.

Personalmente, No voy por esa ruta y uso http://koala-app.com/ para convertir o "compilar" mi Sass. Es GRATIS e impresionante.


3 para la respuesta № 2

Esto es de lo que hablaba SASS. Corrígeme si estoy equivocado pero no necesitas el guión bajo cuando importas un archivo "incluir". Creo archivos sass separados para mis variables y mis mezclas. Están prefijados con un guión bajo que significa un archivo "incluir". SASS reconoce @import "variables"; como @import "_variables.scss". Entonces, para que quede claro cuando se trata de un archivo de inclusión, solo el nombre del archivo sass no necesita la extensión _ o scss.

Nunca he puesto un guión bajo antes de cualquier archivo de inclusión que haya llamado _filename.scss.

Probablemente haya otro problema. Posiblemente con la instalación y las rutas para Bower. Para aquellos que sí agregaron el guión bajo en el pasado y funcionó ... bueno, simplemente omiten lo que podría convertirse en un problema más profundo en el futuro. Necesitas verificar tu instalación.


1 para la respuesta № 3

En tus app.sass archivo cambia la siguiente línea

@import "settings";

A

@import "_settings";

Explicación

Cuando corres compass watch tienes el error

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

Esto solo significa que no puede encontrar el archivo de configuraciónsiendo importado Al agregar el carácter de subrayado al archivo de configuración, ha especificado la ruta de archivo correcta. Si recibe cualquier otro error como este, asegúrese de que la ruta del archivo sea correcta.


1 para la respuesta № 4

Creo que tuve el mismo error; finalmente encontré en el _settings.scss

Debe subrayar antes de importar las funciones

Antes de:

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

Después:

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

También necesitaría importar la configuración de la misma manera.

En mi ejemplo, hice style.scss e importé todo el SCSS dentro:

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

0 para la respuesta № 5

Encontré este mismo problema, pero para mí la solución fue cambiar la importación de configuraciones en app.scss de:

@import "settings";

A:

@import "foundation/_settings";

Una vez que hayas hecho eso, corre compass watch de nuevo.


0 para la respuesta № 6

Puedes instalar Grunt en tu proyecto,¡utiliza la función de reloj de la brújula y otras cosas más ingeniosas para compilar tu sass y cargarla de forma live en el navegador! ¡Aquí tienes un excelente tutorial sobre cómo ponerlo en marcha! (¡Es tan simple como crear dos nuevos archivos en la raíz de su proyecto y luego ejecutar algunos comandos desde su línea de comandos! ¡Lo aconsejo seriamente!)

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


0 para la respuesta № 7

Yo tuve el mismo problema. Para Ubuntu 14.04 los usuarios se aseguran de que nodejs y Bower funcionen correctamente. Puedes seguir estas instrucciones aquí http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283