Share
Bourbon ofrece un puñado de funciones súper útiles que son una adición bienvenida a las funciones nativas que proporciona Sass. Veamos algunos ejemplos interesantes que debería considerar agregar a su vaso..
Donde los mixins nos ayudan a repetir trozos de estilos de manera más eficiente, las funciones de Sass nos ayudan con la lógica: aceptar argumentos y devolver valores. Bourbon proporciona algunas funciones muy útiles de Sass para una variedad de casos de uso. En este tutorial vamos a echar un vistazo a la siguiente selección:
Accentsconagua
relación de oro ()escala modular ()gradiente linealtinte()sombra()em ()Con esta función, es muy fácil calcular la proporción áurea (1: 1.6180339) de un número determinado. Como una advertencia, debo mencionar que esta función está siendo desaprobada lentamente, dando paso a la escala modular () función en su lugar. los relación de oro () La función es útil si desea crear relaciones "significativas" dentro de su tipografía, por ejemplo. Lo mismo ocurre con las relaciones estructurales dentro de su diseño..
Si desea generar una escala modular para estructurar varios tamaños de tipo utilizando la relación de oro, puede aplicar esta función para calcular la media dorada para cualquier numero Construir tu escala tipográfica con ella es sencillo:
El primer parámetro de la función espera un píxel o em valor-aquí representado por una variable Sass definida anteriormente. El segundo parámetro requiere un número entero como valor de incremento / decremento (… -3, -2, -1, 0, 1, 2, 3…) para subir y bajar la escala utilizando la relación de oro.
Aquí está nuestra escala tipográfica usando la proporción de oro:
Hablar con descaro a:
$ base-font-size: 10px cuerpo font-size: $ base-font-size .footnote font-size: golden-ratio ($ base-font-size, -1) // decrementar el valor del tamaño proporcional a la proporción golden por factor 1 h3 tamaño de fuente: proporción de oro ($ base-tamaño de fuente, 1) h2 fuente de tamaño: proporción de oro ($ base-fuente-tamaño, 2) // valor de tamaño proporcional proporcional a la proporción de oro por factor 1 h1 tamaño de fuente: proporción de oro ($ base-tamaño de fuente, 3)
Salida CSS:
cuerpo font-size: 10px; .footnote font-size: 6.18px; h3 font-size: 16.18px; h2 font-size: 26.179px; h1 font-size: 42.358px;
Si necesita redondear la salida, puede usar las funciones integradas de Sass para ese propósito:
abdominales()piso()hacer techo()Hablar con descaro a:
.pie de página tamaño de letra: piso (proporción dorada ($ base-font-size, -1))
Internamente, la función de proporción áurea está utilizando la función de escala modular, con la variable de escala $ dorado para la proporción de oro.
Hablar con descaro a:
@función dorada ($ valor, $ incremento) @return modular-scale ($ valor, $ incremento, $ oro)
Nota: El fantástico marco de cuadrícula Bourbon Neat también utiliza la proporción de oro por defecto para canales y columnas.
Si le gusta la "tipografía más significativa" y desea calcular una escala modular para varios tamaños de fuente, en función de algún tipo de relación numérica, esta función podría ser interesante para usted. Puede calcular varias escalas modulares para usted: la proporción áurea es solo una de las diecisiete opciones precocidas.
Hablar con descaro a:
$ base-font-size: 10px // Su elección de proporción guardada en una variable para cambiarla en un solo lugar // Aquí usé la proporción de doble octava $ type-of-scale: $ doble-octave body font size: $ base-font-size .footnote font-size: escala modular ($ base-font-size, -1, $ type-of-scale) h3 tamaño de fuente: modular-scale ($ base-font-size, 1 , $ type-of-scale) tamaño de fuente h2: escala modular ($ base-font-size, 2, $ type-of-scale) tamaño de fuente h1: modular-scale ($ base-font-size, 3 , $ tipo de escala)
Bourbon preparó estas variables de proporciones predefinidas para varias escalas. Para crear un diseño coherente, sería una buena decisión no mezclar diferentes proporciones para su escala tipográfica en un proyecto. Manténgalo con clase al elegir una proporción que refleje mejor sus intenciones.
Hablar con descaro a:
$ base-font-size: 10px h2 font-size: modular-scale ($ base-font-size, 2, 1.6180)
Si necesita un degradado lineal en combinación con su combinación de imagen de fondo, esta función le ahorrará un poco de código. El color del degradado se define por la color de inicio, la color final y opcional puntos de parada de color entre. Estas paradas de color adicionales le brindan la posibilidad de crear transiciones más sofisticadas entre los colores iniciales y finales, o proporcionar un degradado más colorido..
Echa un vistazo a este horrible gradiente. Aquí creo que es fácil ver cómo gradiente lineal() La función funciona y cómo se puede utilizar:
Hablar con descaro a:
.horrible-gradiente + imagen de fondo (lineal-gradiente (45 grados, // directón de la línea de gradiente rojo 10%, // color de inicio amarillo 15%, // S // sangra en rojo amarillo 40%, // T naranja 45% , // O // sangra en amarillo naranja 50%, // P orange 70%, // S // sangra en verde verde 90%) // color final) altura: 50px
Para los colores se puede proporcionar opcionalmente. %, px o em valores. Estos definen la distancia que se supone que este color debe estirar. Probablemente debería seguir usando % aunque la mayor parte del tiempo Si no proporciona porcentajes como valores de limitación, los colores se extenderán de manera uniforme, dividido por el número de colores en el degradado..
Opcionalmente, puede proporcionar un ángulo para el primer parámetro, ya sea en forma de valor + grado o a con dirección:
45 grados90 gradosa la parte superior izquierdaa derechaa la izquierday así.
Sass: con parámetro de dirección-izquierda a derecha
.gradiente + imagen de fondo (gradiente lineal (a la derecha, amarillo 50%, azul 60%)) altura: 50 px
El gradiente fluye de izquierda a derecha
O algo más sofisticado usando hsla () funciones y multiples gradiente lineal() funciones:
Hablar con descaro a:
.gradiente + imagen de fondo (gradiente lineal (hsla (0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, transparente 50%), gradiente lineal (# 4e7ba3, oscurecer (# 4e7ba4, 10%)) altura: 50px
Es posible que ya esté familiarizado con las funciones integradas de Sass para colores como aligerar() y oscurecer() que hacen exactamente lo que cabría esperar. Bourbon proporciona dos funciones de color impresionantes adicionales para su conveniencia. Ambas funciones toman un parámetro de color y porcentaje para ajustar la mezcla de colores.
La función de tinte cambia un color al mezclarlo con blanco. Espera un segundo parámetro que toma el porcentaje de blanco con el que desea mezclar el color..
Hablar con descaro a:
$ celeste: # 2F7DD1 .tint fondo: tinte ($ celeste, 25%) altura: 100px
Esto es sin tinte ():
Y esto es con tinte ():
La función de sombra cambia de color al mezclarla con negro. Esta función también toma un parámetro de color y porcentaje para ajustar la mezcla de colores.
Hablar con descaro a:
$ celeste: # 2F7DD1. Fondo sombreado: sombra ($ celeste, 25%) altura: 100 px
Aquí vemos lo que pasa sin sombra ():
Y aquí con la sombra ():
Esta función calcula píxeles a ems por ti..
Hablar con descaro a:
tamaño de letra: em (12)
Salida CSS:
tamaño de fuente: 0.75em;
Eso está cubierto muy bien por el momento Borbón. En los últimos dos tutoriales hemos examinado 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 cuadrícula para Sass y Bourbon..
