css - instalar - SASS y la Fundación Zurb: confusas instrucciones de instalación

install foundation framework

Question

Decidí usar la versión Sass de Foundation4 ya que el CSS es prácticamente imposible de editar de manera eficiente ahora.

Seguí las instrucciones aquí: http://foundation.zurb.com/docs/sass.html

Estos me aconsejaron que instalara la gema (no hay problema) luego instalé la brújula y luego creé un proyecto, lo cual hice en wwwroot.

Todo bien hasta ahora. Luego continúa aconsejándome que "descargue los archivos de Github (agarre los directorios scss / y js /) y póngalos en su directorio de proyectos"

Ahora, ¿por qué en el nombre de un pez en una bicicleta las instrucciones me aconsejan hacer esto cuando el paso anterior en la línea de comando (brújula create -r zurb-foundation --usando base) crea una carpeta que ya está en el directorio raíz para mi proyecto - aunque se nombre de manera diferente - que contiene archivos similares, si no idénticos? Ya hay una carpeta "javascripts" con subcarpetas "base" y "proveedor" que contienen en gran medida los mismos archivos, aunque algunos son de diferentes tamaños.

¿Me estoy perdiendo de algo? El archivo "index.html" incluido hace referencia a la carpeta "javascripts", entonces, ¿por qué debo incluir "js" del github? ¡Esto es muy confuso cuando eres nuevo en la tecnología!

Después de seguir las instrucciones de instalación, ahora tengo los archivos "foundation.scss" y "app.scss" que parecen ser los mismos, aparte de uno (app.scss), con muchos comentarios comentados. ¿Cuál debo usar?

Me parece que las instrucciones están básicamente desactualizadas. Parece que no necesito "js" de github, pero sí necesito "scss". El contenido de esta carpeta scss parece que tienen que ir a la carpeta "sass" creada cuando se realiza el proyecto y el archivo "foundation.scss" se puede eliminar ya que "app.scss" es una copia del mismo.

No tengo idea de dónde está esperando el archivo base "app.scss" "importar base", ya que no hay una carpeta "base" creada en la instalación / creación del proyecto. Tal vez me estoy perdiendo algo, pero todo es muy confuso. ¿Podría alguien aclarar con qué debo comenzar y qué puedo eliminar / ignorar?

Answer 1

Cuando instala la gem , se instalan todos los archivos de Foundation adecuados en la memoria caché de gemas. Compass extraerá todos los archivos F4 SCSS de su proyecto a través de la directiva @import de foundation.scss .

Los documentos del proyecto en el repositorio Github muestran las últimas instrucciones de Compass para construir su proyecto F4. https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

Parece que estás mezclando las instrucciones autónomas con las de Compass.

Si has ejecutado esto:

[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation

No necesitas las instrucciones de Github o Standalone.

Los pasos a continuación describen los pasos manuales para construir un proyecto F4. Creo que estás atrapado en el PASO 4 , así que concéntrate en esa parte.

PASO 1:

Descargue para acceder fácilmente a estos dos archivos:

Fundación Vanilla :

http://foundation.zurb.com/files/foundation-4.1.6.zip

Maestro de la Fundación :

https://github.com/zurb/foundation/archive/master.zip

CD en su directorio raíz www :

PASO 2:

Crea este archivo:

/config.rb

require ''zurb-foundation''
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true

Cambiar output_style = :compact or :compressed y line_comments = false para Production (cuando se line_comments = false ).

PASO 3:

• Copie / Mueva index.html desde Foundation Vanilla a su directorio raíz de www.
• Edite la line 11 y cambie foundation.css a app.css en la etiqueta de estilo.

ETAPA 4:

Crea este directorio y archivo:

/ scss /

• Crear app.scss : esta es su hoja de estilo de sitio / aplicación e importaremos Normalize y F4 en ella.

• Copia esto en él:

  // Global Foundation Settings
  // @import "settings";
  
  // Comment out this import if you don''t want to use normalize
  @import "normalize";
  
  // Comment out this import if you are customizing you imports below
  @import "foundation";
  
  // Your own SCSS here...

Si desea anular algunas variables F4 SaSS, necesitará el archivo _settings.scss . Por ahora, omitiría este paso y lo dejaría en comentarios hasta que esté más familiarizado con F4.

PASO 5:

Cree este directorio (los archivos se escriben automáticamente aquí):

/ css /

• app.css : se escribirá aquí desde /scss/app.scss por Compass. Normaliza y todo el F4 CSS estará dentro de él, más cualquier CSS que hayas agregado.

Esto sucede automáticamente, no necesita hacer nada más que tener las gemas necesarias instaladas y su archivo de configuración de Compass del PASO 2 .

PASO 6:

Cree este directorio y copie / mueva estos archivos en él:

/ js /

• Copie / Mueva /js/foundation.min.js desde la descarga de Foundation Vanilla aquí.

• Si necesita su propia app.js / colóquela aquí y conéctela por última vez en su pie de página .

/ js / vendor /

• Copia / mueve /js/vendor/custom.modernizr.js de la descarga de Foundation Vanilla aquí.

• Copie / Mueva /js/vendor/zepto.js y /js/vendor/jquery.js desde la descarga de Foundation Vanilla aquí.

Más tarde, cuando te sientas más cómodo, puedes seleccionar los archivos Foundation JS individuales de Foundation Master y concatenarlos en una lib más pequeña aquí como foundation.min.js .

Deberias hacer eso.

Mira este archivo en mi www repo, ya que muestra una configuración de F4 en funcionamiento: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

También puede explorar cómo integrar Grunt.js para la compilación automática de SCSS y JS con concatenación y minificación: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

Sin ser tan experto como @jhauraw, sí noté algo más.

Instalé FOundation a través de la aplicación Compass. Al ser un principiante con Compass, yo también estaba buscando la carpeta "fundación" que contendría todos los archivos SCSS de la Fundación. Y cuando miré el archivo _settings.scss que estaba presente, parecía que todo estaba comentado. Lo que sé que entiendo (aún como novato para Compass) es que el archivo "fundación" vive dentro de una biblioteca de recursos dentro de Compass. Cuando sea necesario, estos archivos se importan al generar el archivo CSS. El archivo _settings.scss con todos los campos comentados es un archivo de anulación. Por lo tanto, si elimina los comentarios de una variable en particular o mezcla, anulará los originales ocultos en la biblioteca de Compass. El CSS compilado parece contener todo lo que se necesita.