Personalizar Bootstrap 4 en Laravel con Sass y npm

Banner Personalizar Bootstrap

Continuando con la personalización de Bootstrap dentro de Laravel quisiera mostrarles una segunda forma de hacerlo, la cual requiere tener conocimientos en el manejo de Sass ya que Bootstrap 4 lo utiliza como preprocesador CSS. Existen numerosas ventajas al utilizar esta herramienta como por ejemplo la re-utilización de código y la mejor organización de las hojas de estilo lo que permite que nuestro proyecto escale de mejor forma. Veamos cómo trabajar de esta manera:

Ver post

Organizando el proyecto en Sass

Logo
09

Organizando nuestro proyecto

Buenas prácticas al trabajar con Sass Parte 1

En esta lección adicional del Curso de Sass comentamos un poco sobre cómo organizar proyectos de Sass y como manejar la estructura de archivos para proyectos más grandes. Unificando variables en un solo archivo, aprovechando los comentarios de Sass para documentar nuestras variables, mixins y funciones, y organizando los archivos de manera lógica.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Directivas adicionales en Sass

Logo
09

Directivas adicionales de Sass

Aprende a lidiar con errores en el código Parte 1

Durante las últimas semanas hemos aprendido sobre el funcionamiento de Sass y sobre todo cómo hacer uso de sus características para generar CSS, con este video llegamos al final del curso, y hablaremos de algunas cosas que nos ayudan a hacer nuestro código más sólido y seguro, como son las directivas @debug y @warn y además la directiva @error.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Sass Extends – Extendiendo selectores

Logo
07

Compartiendo selectores en Sass

Curso de Sass Parte 1

En esta lección siete hablamos sobre una característica quizás algo controversial de Sass: la directiva @extend, la cual nos permite compartir bloques de código con otros selectores. Menciono controversial porque algunos desarrolladores consideran su uso un poco engañoso, pero te aseguro que hay situaciones donde son muy útiles y aparte son una herramienta muy interesante del lenguaje.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Estructuras de Control en Sass

Logo
06

Condicionales y varios tipos de ciclos

Curso de Sass Parte 1

Hoy aprenderemos a trabajar con las Estructuras de Control en Sass, las cuales nos permiten generar código CSS de muchas formas. Los condicionales nos ayudan a crear CSS que dependa del resultado de una expresión, y los diferentes tipos de ciclos generan bloques de CSS repetidamente dependiendo de contadores, listas o a través del resultado de expresiones.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Mixins, bloques de código parametrizable en Sass

Logo
05

Mixins, bloques de código que aceptan argumentos

Curso de Sass Parte 1

En esta nueva lección del curso de Sass a Fondo aprenderemos cómo trabajar con mixins. La directiva mixin te permite definir snippets o bloques de código que puedes reusar en cualquier parte de un documento de Sass. Estos bloques de código pueden contener cualquier número de propiedades con sus valores, selectores, puede también contener estructuras de control, y además pueden aceptar argumentos que cambian su resultado dándote mucha flexibilidad para crear partes de código reusable.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.