Share
El Bootstrap de Twitter es indudablemente popular, y si eres fanático de los preprocesadores de CSS, te encantará el hecho de que está basado en MENOS. Desafortunadamente, si usted (como yo) disfruta trabajar con SASS, por lo general no hay nada disponible para que pueda comenzar. Hasta ahora. Este tutorial explicará cómo combinar SASS, Compass y Twitter's Bootstrap.
Nuevo logo de Sass por el pintor Bermon
Para empezar, vamos a necesitar descargar algunos recursos. También necesitarás tu editor de texto favorito; Uso WebStorm de JetBrains, pero puedes usar lo que prefieras.
Dirígete a rubyinstaller.org para que podamos agarrar a Ruby y presiona el botón rojo grande de descarga. En esa página de descargas, siga adelante y haga clic en el enlace de Rails actual. La versión que estoy usando hoy es: rubyinstaller-1.9.3-p286
Una vez que empiece a descargarse, tendremos que ir a buscar un recargador en vivo. En una máquina con Windows, dirígete a Scout; mi recargador en vivo de elección, los usuarios de Mac probablemente usarán LiveReload.
La siguiente tarea es obtener una gran edición SASS de Bootstrap-SASS de Twitter de GitHub: simplemente haga clic en ZIP ... (No puedo agradecerle a Thomas McDonald lo suficiente por esta conversión de MENOS).
Vale, eso es todo para descargar..
Adelante, instala el instalador Ruby y Scout..
Ahora crea una carpeta temporal y extrae el zip Bootstrap-Sass en ella:
A continuación, debemos dirigirnos a nuestra ventana de solicitud de comando para configurar nuestro proyecto. Adelante y escriba gema instalar brújula en el indicador C: \.
Esto instalará la brújula en su máquina. Solo espera un par de minutos para terminar (tal vez tomar un café). Una vez hecho esto, siga adelante y cierre su línea de comando.
Dirígete al directorio donde quieres colocar tu nuevo proyecto, luego presiona Shift + Click derecho (en Windows) en esa carpeta. A continuación, seleccione Abrir ventana de comandos aquí. Una vez que esté abierto, escriba brújula crear YourProjectName. También puede navegar a su proyecto directamente a través del indicador de comandos: consulte Introducción de la línea de comandos de un diseñador para obtener más detalles sobre los directorios de desplazamiento..
Eso es todo para crear tu proyecto Compass / Sass..
¿Recuerdas cuando creaste esa carpeta temporal? Ahora es el momento de ir a agarrar a Bootstrap para lanzarlo..
Pásate por 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ asset'. Allí, copiará el contenido de la carpeta de Activos y lo pegará en la carpeta de su proyecto. Simplemente siga adelante y elimine ie, screen, y print.scss en su carpeta Sass.
La carpeta de su proyecto debería verse así:
Ahora tendrá un proyecto Bootstrap configurado con todas las golosinas de SCSS. Ahora, para comenzar a recoger su código html, usaré fluid.html de las plantillas html en el sitio web de Bootstrap de Twitter..
Mientras esté en el sitio web, vea la fuente y luego cópielo (una forma bastante fácil de obtener un poco de marcado básico de Bootstrap). Luego, inicie su editor de texto, cree un nuevo archivo y asígnele el nombre index.html. Continúa y pega el contenido HTML de la plantilla HTML Bootstrap de Twitter.
Una vez que haya terminado, continúe y edite el html para señalar todas las referencias a su estructura de archivos, es decir, ... href = "… /assets/ico/favicon.ico" a href = "images / favicon.ico".
¡Y no olvide configurar la referencia de la hoja de estilo en "stylesheets / style.css"! También deberá cambiar jquery.js a bootstrap.js. Tómese su tiempo y corrija las referencias HTML para que coincidan con las rutas de su proyecto.
Cree un archivo llamado style.scss en su carpeta Sass, para que Scout sepa qué buscar. Fire Scout hasta! El Scout debería verse así una vez que presionas el botón de reproducción..
Creará y actualizará su css automáticamente, actuando de manera efectiva como el comando 'brújula'.
Conseguir su estilo.scss abierto en su editor de texto, necesita agregar dos reglas de importación: @import 'bootstrap'; y @import 'bootstrap-responsive';. Guardalo!
Enhorabuena, ahora tiene un sitio Bootstrap and Sass funcional y muy modificable.!
Nota: Los mixins y las variables se pueden cambiar fácilmente ingresando a /bootstrap/_mixins.scss y /bootstrap/_variables.scss respectivamente.
El poder de Bootstrap y Sass no puede ser negado; ¡Usa este poder sabiamente! Para cualquier referencia sobre el uso de bootstrap de Twitter, consulte nuestra serie Bootstrap 101 o visite el sitio web de Bootstrap de Twitter y lea el proyecto de Thomas McDonald's en GitHub. Si nada más, envíale un rápido gracias!
Aquí están los enlaces de nuevo, más un par de recursos de aprendizaje adicionales.
Accentsconagua