9 bibliotecas mixtas para diseñadores de sass deben obtener

Si usa Sass en su flujo de trabajo de desarrollo, sabe la importancia de los mixins. Cuando ves algunas cosas que están escritas. repetidamente y tediosamente en CSS, ahí es donde los mixins pueden ayudarlo a evitar trabajos repetitivos. Un mixin contiene declaraciones de CSS que puede reutilizar en todo su sitio..

Hay muchos mixins creados por desarrolladores, para ayudarte cuando trabajas con Sass en tu desarrollo. La mayoría cubren cosas que a menudo son repetitivas en CSS. Desde Adaptación a través de múltiples navegadores. a Creación de botones, animaciones y efectos de transición., encuentre esto y más en las siguientes 11 bibliotecas de mezcla que debe obtener para su desarrollo Sass.

1. Bourbon

Bourbon es una biblioteca de Sass que contiene mezclas, funciones y complementos que te permiten simplificar la creación de hojas de estilo para el uso en varios navegadores. Para mí, esta es la mezcla más maravillosa de Sass. Contiene casi todo lo que necesita para diseñar su sitio web a la vez que mantiene su hoja de estilo ligera.

Consulte la documentación completa para utilizar cada mezcla y función disponibles..

2. Sass CSS3 Mixins

Sass CSS3 Mixins proporciona mixins que funcionan en diferentes navegadores. Encontrará un montón de combinaciones de mejores prácticas aquí, como fondo, borde, cuadro, columna, fuente, transformación, transición y animación. Es suficiente para sus necesidades de estilo. Para usar, importar el css3-mixins.scss y llama al mixin en tu clase de CSS.

Descarga este mixin aquí.

3. CssOwl

CssOwl proporciona mixins útiles para establecer la posición de un elemento (relativo o absoluto) y agregar contenido con el pseudo selector ( :después y :antes de). También ayuda cuando desea crear elementos de sprite: la mezcla le da flexibilidad para establecer la posición de la imagen en su sprite. Además de Sass, la biblioteca de mezclas CssOwl también está disponible para LESS y Stylus.

4. Breakpoint Sass

Breakpoint le ayuda a realizar consultas de medios a través de Sass de una manera sencilla. Con Breakpoint, puede crear variables y asignarle un valor que defina el ancho mínimo o anchura máxima de consultas de medios. Dado que la variable que ha creado tiene un nombre significativo, puede llamarlo fácilmente para usarlo en Sass.

5. Scut

Scut contiene un conjunto de mixins de Sass reutilizables, marcadores de posición, funciones y variables que le ayudan a implementar fácilmente los patrones de código de estilo comunes. Proporciona el código de mejores prácticas para crear elementos web como diseños de página y tipografía de estilo. Puede reducir la repetición al escribir el código reutilizándolo más a menudo. Así, ayudándote a ser más organizado en el proceso..

6. Azafrán

Con Saffron, puedes agregar animaciones y transiciones CSS3 con facilidad. Hay una docena de animaciones y transiciones disponibles, que incluyen atenuación de entrada / salida, deslizamiento de entrada / salida, aumento de entrada / salida, así como efectos diversos como sacudidas, balanceo, rebote y otros. Para usar Saffron, simplemente incluya la mezcla en la declaración de Sass y llame el nombre del efecto dentro de su clase de CSS. Puede obtener Saffron al instalarlo con Bower o Gem, o simplemente descargarlo manualmente desde Github.

7. Configuración de tipo

TypeSettings es un tipo de conjunto de herramientas para Sass. Establecerá el tamaño de fuente en escala modular utilizando em (en lugar de rems o píxeles), ritmo vertical y titulares basados en relación de respuesta. Puede instalar este también con Bower, descargar la versión o clonar el repositorio. Para más detalles, echa un vistazo a su página..

8. Sass Line

Sass Line es una mezcla de Sass que te ayuda a hacer una mejor tipografía. Utiliza la unidad rems en su fuente para que pueda trabajar proporcionalmente desde la cuadrícula de línea de base. Sass Line utiliza un ritmo vertical preciso basado en la cuadrícula de línea de base y le permite establecer una escala modular para cada uno de sus puntos de interrupción para obtener buenas proporciones en todos los aspectos de su sitio web.

Vaya aquí para obtener más detalles sobre cómo usarlo.

9. Andy.scss

Andy.scss es una colección de mixins útiles de Sass, diseñados para ayudarlo a desarrollar el aspecto de un sitio web con facilidad mientras lo mantiene ligero. Hay docenas de mixins de Sass disponibles, desde fondos hasta animaciones. Casi todas las propiedades CSS usadas comúnmente están cubiertas aquí. Consíguelo en Github.

Más publicaciones en Sass:

Empezando con Sass
Cavando en sass
Cómo compilar Sass con texto sublime
Usando Bootstrap 3 Con Sass
Cómo construir una VCard en línea con Sass & Compass
Preprocesadores CSS comparados: Sass vs. MENOS
Hojas de estilo sintácticamente impresionantes: uso de Compass In Sass
Cómo convertir CSS a Sass y SCSS