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?

40 recortes creativos del mapa mundial

Si no tiene el placer de ser un estudiante en una clase de geografía donde el maestro puede dibujar un mapa mundial completo de la memoria (giro de la trama: el profesor es un profesor de Historia, de acuerdo con los comentarios), entonces es seguro asumir que la geografía probablemente no sea tu clase favorita .

(Consejos de tecnología y diseño)

Cómo configurar la billetera TREZOR por primera vez

Si usted es serio acerca de las criptomonedas en su posesión, debe guardarlas en una billetera de hardware porque es probablemente la más segura . En este tutorial, le mostraré cómo configurar su TREZOR, uno de los monederos de hardware más seguros disponibles, por primera vez.Dentro de la caja Primero y más importante, asegúrese de que el sello de seguridad en la caja no esté templado . En cas

(Consejos de tecnología y diseño)