Bourbon on the Rocks: funciones geniales para mejorar tu Sass

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:

$base-font-size: 10px

body
  font-size: $base-font-size

.footnote
  font-size: golden-ratio($base-font-size, -1)
  // decrement size value proportional to golden ratio by factor 1
h3
  font-size: golden-ratio($base-font-size, 1)
h2
  font-size: golden-ratio($base-font-size, 2)
  // increment size value proportional to golden ratio by factor 1
h1
  font-size: golden-ratio($base-font-size, 3)

Salida CSS:

1	body {
2	font-size: 10px;
3	}
4
5	.footnote {
6	font-size: 6.18px;
7	}
8
9	h3 {
10	font-size: 16.18px;
11	}
12
13	h2 {
14	font-size: 26.179px;
15	}
16
17	h1 {
18	font-size: 42.358px;
19	}

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

abs()
floor()
ceil()

Sass:

1	.footnote
2	font-size: floor( golden-ratio($base-font-size, -1) )

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:

1	@function golden-ratio($value, $increment) {
2	@return modular-scale($value, $increment, $golden)
3	}

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:

$base-font-size: 10px
// Your choice of ratio saved in a variable to change it in one place
// Here I used the double-octave ratio
$type-of-scale: $double-octave

body
  font-size: $base-font-size

.footnote
  font-size: modular-scale($base-font-size, -1, $type-of-scale)

h3
  font-size: modular-scale($base-font-size, 1, $type-of-scale)

h2
  font-size: modular-scale($base-font-size, 2, $type-of-scale)

h1
  font-size: modular-scale($base-font-size, 3, $type-of-scale)

Escalar variables

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:

1	$base-font-size: 10px
2
3	h2
4	font-size: modular-scale($base-font-size, 2, 1.6180)

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:

Sass:

.horrible-gradient
  +background-image(linear-gradient(
    45deg,                // directon of gradient line
    red 10%,              // starting color
    yellow 15%,   // S    // bleeds into red
    yellow 40%,   // T
    orange 45%,   // O    // bleeds into yellow
    orange 50%,   // P
    orange 70%,   // S    // bleeds into green
    green 90%)            // ending color
  )
    height: 50px

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

1	.gradient
2	+background-image(linear-gradient(to right, yellow 50%, blue 60%))
3	height: 50px

El gradiente fluye de izquierda a derecha

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

Sass:

.gradient
  +background-image(linear-gradient(
    hsla(0, 100%, 100%, 0.25) 0%,
    hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
    linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  height: 50px

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:

$light-blue: #2F7DD1

.tint
  background: tint($light-blue, 25%)
  height: 100px

Esto es sin tint():

Y esto es con tint():

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:

$light-blue: #2F7DD1

.shade
  background: shade($light-blue, 25%)
  height: 100px

Aquí vemos lo que sucede sin shade():

Y aquí con shade():

em()

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

Sass:

1	font-size: em(12)

Salida CSS:

1	font-size: 0.75em;

¡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.