Share
Sass es una excelente manera de acelerar el desarrollo de aplicaciones para usuario en general, lo uso en cada uno de mis proyectos. Sass (como con todos los otros preprocesadores) permite estilos, funciones y códigos preescritos anidados en lo que se conoce como mixins. Foundation tiene algunas versiones diferentes, actualmente hemos cubierto las variantes más comunes de HTML / CSS, pero ahora vamos a hablar de una versión construida en Sass.
El equipo detrás de Foundation no solo ha usado Sass para permitir un estilo más amigable y dinámico, sino que también ofrece una mayor personalización en la versión Sass que en la versión HTML / CSS..
Sass es ideal para aquellos de ustedes que, como yo, son diseñadores primero y luego programadores. HTML y CSS son fáciles de aprender y hacer el trabajo, pero es un gran salto pasar de esos lenguajes simplistas a jQuery y JavaScript. Usar Sass le permite flirtear con la idea de funciones, variables y código reutilizable que realmente ayuda en la transición hacia lenguajes más complejos..
Vamos a bucear aquí mismo, y necesitaremos usar el terminal / comando para hacerlo, pero no se desanime ya que es más fácil de lo que parece. Para comenzar, abra Terminal (OS X) y pegue lo siguiente:
sudo gem instalar zurb-foundation
El proceso puede tardar un tiempo, pero debería aparecer una pantalla como esta:
Una vez que haya completado este paso, esencialmente habrá agregado el núcleo de Foundation a su sistema, lo que le permitirá reutilizarlo a su gusto sin tener que ir al sitio de Foundation. Lo bueno de este enfoque es que con otro comando simple puede actualizar este marco central reutilizable para la última versión pública o candidato de lanzamiento. Para hacer esto, simplemente pegue uno de los siguientes en el terminal:
actualización de sudo gem zurb-foundation
sudo gema instalar zurb-foundation --pre
Hay un paso final de configuración y es instalar Compass, que nos permitirá crear compilaciones de Foundation para usar en nuestros proyectos. Una vez más, esto puede llevar algún tiempo, así que ten paciencia. Pega lo siguiente:
sudo gema instalar brújula
Después de la instalación, debe tener una salida de Terminal que se vea así:
Ahora que hemos recorrido los giros y vueltas de la instalación de una gema rubí y de mantenerla actualizada, configuremos un proyecto para que podamos comenzar a analizar esta ruta de desarrollo con Foundation..
Cada vez que desee iniciar un nuevo proyecto, simplemente abra el terminal y escriba "cd" (cambiar directorio), sin las marcas de voz, entonces deberá escribir una ruta o crear una carpeta para su proyecto y arrastrarla. a la terminal. Sin embargo, asegúrese de que haya un espacio entre "cd" y su ruta. Sigue esto con un comando que creará tu proyecto:
brújula cree TU-PROYECTO-NOMBRE -r zurb-foundation --utiliza la base
Asegúrese de cambiar el texto "YOUR-PROJECT-NAME" para el nombre de su proyecto real y haga clic en regresar. Luego verás muchas líneas de información que resultan en una elección. Esta opción determina si sus archivos Sass se convertirán a archivos CSS cada vez que los guarde, o manualmente cuando elija convertirlos. Siempre uso la segunda opción, que crea automáticamente archivos CSS cada vez que guardo mis archivos Sass. Debería ver algo como esto:
Se puede ver en esto que han pasado muchas cosas y que nace su proyecto basado en la Fundación. Una vez que haya elegido su método de compilación utilizando el método de "compilación de brújula" o "observación de brújula", es posible que desee tomar el código que puede ver en la parte inferior de la imagen. Esto solo le ahorrará algo de tiempo ya que agrega su hoja de estilo de salida y normaliza.
Desde aquí puedes comenzar a construir tu proyecto usando Sass..
Si está usando Windows, aún puede usar la versión Sass de Foundation, solo se necesitan unos pasos más para comenzar. En primer lugar, vamos a agarrar a Ruby. Ruby es lo que nos permitirá instalar esta versión de Foundation basada en Sass. A diferencia de OS X, Windows no tiene esto instalado de forma predeterminada, así que tendremos que ir a buscarlo.
Ahora querrá la última versión (2.0.0 al momento de escribir) y, dependiendo de la arquitectura que esté utilizando, elija el estándar para máquinas de 32 bits o x64 para máquinas de 64 bits. Si no está seguro de cuál, simplemente haga clic con el botón derecho en "Mi PC" y haga clic en "Propiedades" para averiguarlo. Si eso falla, ve con 32 bits.
Una vez descargado, ejecute la instalación. No marque / cambie nada a menos que sepa lo que está haciendo. Una vez completada la instalación, vaya a programas, luego Ruby y haga clic en "Iniciar línea de comando con Ruby". Una vez que haya cargado, copie el siguiente código y péguelo en el símbolo del sistema, puede hacerlo haciendo clic derecho en la barra superior y yendo a editar> pegar.
gema instalar zurb-foundation
Verás algo similar a esto:
También puede mantener la Fundación actualizada usando el comando de compilación pública general o el comando de liberación de candidato:
actualización de gemas zurb-foundation
gema instalar zurb-foundation --pre
Ahora que tenemos la configuración básica, avancemos e instalemos la pieza final, Compass. Al igual que antes, podemos instalar Compass usando un comando:
gema instalar brújula
Sea paciente, esto resultará en una pantalla como esta:
Para crear realmente su proyecto, deberá cambiar a un directorio como "Escritorio" y ejecutar un comando. Puede hacerlo escribiendo "cd" sin las marcas de voz, seguido de un espacio, seguido de una ruta. Para agregar la ruta, puede escribir una o simplemente arrastrar y soltar la carpeta en el símbolo del sistema.
Una vez que haya cambiado el directorio, ejecute este comando y asegúrese de cambiar YOUR-PROJECT-NAME para el nombre de su proyecto real.
brújula cree TU-PROYECTO-NOMBRE -r zurb-foundation --utiliza la base
¡Y eso es! Siguiendo esto no hay diferencias entre Windows y OS X.
Si usas OS X hay una gran herramienta de desarrollo llamada CodeKit. Esta aplicación minimiza automáticamente JS, CSS, SCSS y convierte SCSS a CSS, lo que significa que puede matar el terminal y usar CodeKit en su lugar. También ofrece resaltado de errores para JS y SCSS, incluidas bibliotecas como jQuery.
Sé lo que estás pensando; "No tengo OS X". No se preocupe, no me he olvidado de su gente de Windows: puede tomar la aplicación equivalente más cercana llamada Prepros.
En la siguiente parte veremos qué puede hacer con esta versión más dinámica de Foundation basada en Sass, que incluye la personalización de la compilación, el cambio de estilos predeterminados y mucho más..
Accentsconagua