Usando Bootstrap 3 con Sass

Bootstrap viene con Rejillas receptivas y algunos componentes web comunes que podemos recoger para crear rápidamente un sitio web receptivo . Si ha visto nuestras publicaciones anteriores en Bootstrap, probablemente sepa que los estilos de Bootstrap están compuestos por LESS.

Mientras que LESS se ha vuelto más poderoso con las nuevas características introducidas en la versión 1.5, algunos de ustedes estarán más familiarizados con Sass / SCSS. También puede haber algunas características en Sass que no puedes vivir sin ellas, pero no están presentes en LESS (aún). Si quieres trabajar en Boostrap y con Sass, gracias a Thomas McDonald, puedes hacerlo porque Bootstrap ha sido portado a Sass / SCSS .

Instalación

Hay algunas formas de comenzar a usar Bootstrap + Sass . En primer lugar, dado que se ha incluido como una gema Ruby, puede instalarlo a través de Terminal con la siguiente línea de comando:

 joya instalar bootstrap-sass 

También puede usarlo junto con Compass con este comando a continuación. Es lo mismo que la forma en que instalamos la Fundación Zurb. Sin embargo, tenga en cuenta que de esta forma solo se incluirán las variables _variables.less que contienen variables de Bootstrap y styles.less en las que coloca sus propias reglas de estilo.

 brújula crea mi-nuevo-proyecto -r bootstrap-sass --usando bootstrap 

Alternativamente, simplemente puede descargarlo desde el repositorio de Github.

Qué hay de nuevo en Bootstrap 3

Aquí hay algunas características nuevas que se encuentran en Bootstrap 3.

Diseño plano

El cambio que puede ver de inmediato en la nueva versión, Bootstrap 3, es que ahora abarca el diseño plano. Los degradados y las sombras que encontramos en los componentes de la versión anterior ya no están.

Cuadrícula en Bootstrap 3

Bootstrap también presenta un conjunto de nuevas clases y nuevas construcciones de grillas. En la versión 3, existen grillas grandes, medianas, pequeñas y extrapequeñas para adaptarse a diferentes tamaños de ventanas. Veamos el siguiente ejemplo de HTML:

Columna izquierda
Columna media
Columna derecha

Tenemos tres columnas. Cada columna tiene un ancho igual cuando se ve en un tamaño de ventana grande (en una pantalla de escritorio u orientación horizontal en la tableta). El tamaño se aplica con la clase col-md-4 .

Luego, cuando el tamaño de la pantalla se col-sm-*, la división del ancho de la columna se ajustará con la clase col-sm-*, de modo que el ancho de la columna pueda permanecer en la proporción correcta en lugar de simplemente apilarse, como en la versión anterior de Bootstrap.

Nuevos componentes

También se agregaron algunos Componentes nuevos en la versión 3. Esto incluye Buscapersonas (usado para construir el tipo de navegación Siguiente y Anterior), Grupo de Lista, Paneles y Encabezado de Página .

Utilizando funciones Sass

Técnicamente, podemos agregar clases Bootstrap a los elementos HTML para hacer el diseño del sitio web, como lo hicimos en el ejemplo anterior. Pero, al usar CSS Preprocesadores, como Sass, podemos utilizar algunas de las funciones para lograr una estructura de HTML más limpia y semántica en lugar de estar llenos de nombres de clase sin sentido.

Dado el ejemplo anterior, podemos cambiar la estructura y los nombres de las clases a algo como esto:

Este es el contenido.
Esta es la barra lateral.
Esta es la navegación.

Dentro de la hoja de estilo, podemos usar la directiva Sass @extend para construir el diseño. Usar @extend los selectores que comparten las mismas reglas de estilo.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

Alternativamente, también puede usar Sass @include que copiará e incluirá las reglas de estilo de mixins en nuestros selectores de clase.

 .main-area {@include make-row; } .content {@include make-xs-column (6); @include make-sm-column (6); } .sidebar {@include make-xs-column (4); @include make-sm-column (4); } .side-nav {@include make-xs-column (2); @include make-sm-column (2); } .column {@include make-md-column (4); } 

Ahora, visualícelo en el navegador y obtendrá un diseño receptivo.

Conclusión

Bootstrap y Sass definitivamente hacen un gran combo. Con Bootstrap, puede crear un sitio web receptivo y funcional en solo unas pocas horas . Y las características en Sass como @extend y @include pueden ayudarnos a escribir CSS más simple, programable y mantenible . Para obtener más información sobre Sass, puede consultar este artículo: Introducción a Sass: instalación y conceptos básicos.

Entonces, ¿has probado Bootstrap + Sass?

Dónde encontrar nuevos y buenos escritores (los mejores 5)

Entonces, estás buscando un escritor . Específicamente, estás buscando a alguien que pueda atraer los ojos a tu sitio web con palabras, de la misma manera que el Pied Piper puede alejar a los niños de Hamelin con música. ¡Eso es genial! Incluso con el advenimiento de los periodistas robot, no hay nada como dar el toque humano a la copia virtual.Por e

(Consejos de tecnología y diseño)

Cómo obtener calificaciones de Goodreads a través de API

Para los amantes de los libros que tienen un gusto por un género específico, probablemente verifiquen la recomendación de un amigo antes que seguir una lista de los más vendidos. Esta es la razón por la cual Goodreads de Amazon es un sitio marcado para lectores ávidos. Es un lugar donde puedes encontrar una extensa base de datos de libros, recomendaciones y reseñas de otros amantes de los libros.Goodre

(Consejos de tecnología y diseño)