Advertisement
  1. Web Design
  2. Sass

Bourbon on the Rocks: funciones geniales para mejorar tu Sass

by
Read Time:5 minsLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
One for the Road: More Tasty Bourbon Mixins
Bourbon Neat: Semantic, Unopinionated, Responsive Grids

Spanish (Español) translation by D***C (you can also view the original English article)

Bourbon ofrece un puñado de funciones súper útiles que son una adición bienvenida a las funciones nativas que Sass proporciona. Echemos un vistazo a algunos ejemplos interesantes que deberías considerar agregar a tu vaso.

Funciones

Donde los mixins nos ayudan a repetir fragmentos de estilos de manera más eficiente, las funciones Sass nos ayudan con la lógica: aceptar argumentos y devolver valores. Bourbon proporciona algunas funciones Sass muy útiles para una variedad de casos de uso. En este tutorial echaremos un vistazo a la siguiente selección:

  • golden-ratio()
  • modular-scale()
  • linear-gradient
  • tint()
  • shade()
  • em()

golden-ratio()

Con esta función, es muy fácil calcular la relación de oro (1:1.6180339) de un cierto número. Como un indicador, debo mencionar que esta función está en desuso lentamente, dando paso a la función modular-scale() en su lugar. La función golden-ratio() es útil si deseas crear relaciones "significativas" dentro de tu tipografía, por ejemplo. Lo mismo ocurre con las relaciones estructurales dentro de tu diseño.

Escala tipográfica

Si deseas generar una escala modular para estructurar varios tamaños de tipo utilizando la relación de oro, puedes aplicar esta función para calcular la media dorada para cualquier número. Construir tu escala tipográfica con ella es sencillo:

El primer parámetro de la función espera un valor pixel o em, representado aquí por una variable Sass definida anteriormente. El segundo parámetro requiere un entero como un valor de incremento/disminución (...-3, -2, -1, 0, 1, 2, 3...) para mover hacia arriba y hacia abajo la escala utilizando la relación de oro.

Aquí está nuestra escala tipográfica usando la proporción de oro:

Sass:

Salida CSS:

Si necesitas redondear la salida, puedes utilizar las funciones integradas de Sass para ese propósito:

  • abs()
  • floor()
  • ceil()

Sass:

Bajo el capó

Internamente, la función golden-ratio está utilizando la función de escala modular, con la variable de escalado $golden para la relación de oro.

Sass:

Nota: El fantástico marco de cuadrícula Bourbon Neat también utiliza la proporción de oro por defecto para canalones y columnas.

modular-scale()

Si estás en la "tipografía más significativa" y deseas calcular una escala modular para varios tamaños de fuente, basada en algún tipo de relación numérica, esta función podría ser interesante para ti. Puede calcular varias escalas modulares para ti, la relación de oro es sólo una de las diecisiete opciones predefinidas.

Sass:

Escalar variables

filefilefile

Bourbon preparó estas variables de relaciones predefinidas para varias escalas. Para crear un diseño coherente, sería una buena decisión no mezclar diferentes proporciones para tu escala tipográfica en un proyecto. Manténlo con clase decidiendo una relación que refleje mejor tus intenciones.

Sass:

linear-gradient()

Si necesitas un degradado lineal en combinación con tu mixin de imagen de fondo, esta función te ahorrará un poco de código. El color del degradado se define por el color inicial, el color final y los puntos de color de parada opcionales en el medio. Estas paradas de color adicionales te dan la posibilidad de crear transiciones más sofisticadas entre los colores inicial y final, o proporcionar un degradado más colorido.

Echa un vistazo a este horrible gradiente. Aquí creo que es fácil ver cómo funciona la función linear-gradient() y cómo se puede utilizar:

filefilefile

Sass:

Para los colores, puedes proporcionar opcionalmente valores %, px o em. Estos definen la distancia a la que se supone que este color se extiende. Tu probablemente debes seguir usando % la mayor parte del tiempo sin embargo. Si no proporcionas porcentajes como valores de limitación, los colores se estirarán uniformemente, divididos por el número de colores en el degradado.

Opcionalmente, puedes proporcionar un ángulo para el primer parámetro, ya sea en forma de value + deg o to con direction:

  • 45deg
  • 90deg
  • to left top
  • to right
  • to left

y así sucesivamente.

Sass: con parámetro de dirección de izquierda a derecha

filefilefile

El gradiente fluye de izquierda a derecha

O algo más sofisticado usando funciones hsla() y múltiples funciones linear-gradient():

Sass:

filefilefile

Funciones de color de tinte y sombra

Es posible que ya estés familiarizado con las funciones integradas de Sass para colores como lighten() y darken() que hacen exactamente lo que cabría esperar. Bourbon proporciona dos funciones adicionales de color impresionantes para tu conveniencia. Ambas funciones toman un parámetro de color y porcentaje para ajustar la mezcla de colores.

tint()

La función de matiz cambia un color mezclándolo con blanco. Espera un segundo parámetro que tome el porcentaje de blanco con el que deseas mezclar el color.

Sass:

Esto es sin tint():

filefilefile

Y esto es con tint():

filefilefile

shade()

La función de sombra cambia un color mezclándolo con negro. Esta función también toma un parámetro de color y porcentaje para ajustar la mezcla de colores.

Sass:

Aquí vemos lo que sucede sin shade():

filefilefile

Y aquí con shade():

filefilefile

em()

Esta función calcula píxeles en ems por ti.

Sass:

Salida CSS:

¡Salud!

Eso ha cubierto a Bourbon muy bien por ahora. Durante el último par de tutoriales hemos analizado en detalle algunos de los mixins y funciones más útiles que ofrece.

En la siguiente parte de esta serie en curso, echaremos un vistazo a Bourbon Neat: un marco de rejilla para Sass y Bourbon.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.