11 bibliotecas de Mixin para diseñadores de Sass deben obtener

Si usa Sass en su flujo de trabajo de desarrollo, sabrá la importancia de mixins. Cuando vea algunas cosas que se escriben de forma repetida y tediosa en CSS, es ahí donde mixins puede ayudarlo a evitar el trabajo repetitivo. Un mixin contiene declaraciones CSS que puedes reutilizar en tu sitio.

Hay muchos mixins creados por los desarrolladores para ayudarlo cuando trabaje con Sass en su desarrollo. La mayoría cubre cosas que a menudo son repetitivas en CSS. Desde la adaptación en múltiples navegadores hasta la creación de botones, animaciones y efectos de transición, encuentre esto y más en las siguientes 11 bibliotecas de mixin que debería obtener para su desarrollo Sass.

1. Borbón

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

Consulte la documentación completa para usar cada mezcla y función disponible.

2. Sass CSS3 Mixins

Sass CSS3 Mixins proporciona mixins que funciona en diferentes navegadores. Encontrará un montón de mixins de mejores prácticas aquí, como fondo, borde, recuadro, columna, font-face, transformación, transición y animación. Es suficiente para sus necesidades de diseño. Para usar, importe css3-mixins.scss y llame al mixin en su clase de CSS.

Descargue este mixin aquí.

3. Sassmatic

¿Quieres filtrar tu imagen con un efecto sorprendente en Sass? Sassmatic puede ser lo que necesitas. Es una biblioteca de filtros de fotos, que utiliza Sass y Compass, que le da a sus imágenes 14 efectos de filtro que incluyen lomo, refrigeración, calentamiento, sepia y otros. Incluso puede crear un filtro personalizado al combinar varios filtros disponibles y cambiar el valor como desee.

4. CssOwl

CssOwl proporciona mixins útiles para establecer la posición de un elemento (relativo o absoluto) y agregar contenido con el pseudo selector ( :after y :before ). 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 de CssOwl también está disponible para LESS y Stylus.

5. Breakpoint Sass

Breakpoint lo ayuda a hacer consultas de medios a través de Sass de una manera simple. Con Breakpoint, puede crear variables y darle un valor que defina el min-width o el min-width max-width de consultas de medios. Dado que la variable que ha creado tiene un nombre significativo, puede llamarla fácilmente para usarla en Sass.

6. Scut

Scut contiene un conjunto de mixins Sass reutilizables, marcadores de posición, funciones y variables que le ayudan a implementar fácilmente patrones comunes de código de estilo. Proporciona código de mejores prácticas para crear elementos web, como diseños de página y estilo de tipografía. Puede reducir la repetición al escribir código reutilizando el código con mayor frecuencia. Por lo tanto, ayudarlo a organizarse más en el proceso.

7. Botones

Buttons es una biblioteca que te ayuda a crear botones en hermosos estilos. Obtiene estilos de botón predefinidos como Plano, Brillo, Redondeado, 3D, Borde, Píldora, Círculo y menú desplegable. Para un uso rápido solo incluye el button.css en tu HTML. Pero si desea personalizar su propio botón, siga este tutorial.

8. Azafrán

Con Saffron, puede agregar animaciones y transiciones CSS3 con facilidad. Hay una docena de animaciones y transiciones disponibles, que incluyen fundido de entrada / salida, deslizamiento hacia adentro / hacia afuera, aumento de entrada / salida, así como efectos diversos como agitar, balancear, rebotar y otros. Para usar Saffron simplemente incluya el mixin en la declaración Sass, y llame el nombre del efecto dentro de su clase CSS. Puede obtener Saffron instalándolo usando Bower o Gem, o simplemente descárguelo manualmente desde Github.

9. Escriba Configuraciones

TypeSettings es un tipo de juego 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 razón de respuesta. Puede instalar este también con Bower, descargar la versión o clonar el repositorio. Para más detalles, mira su página.

10. Línea Sass

Sass Line es una mezcla de Sass que te ayuda a mejorar la tipografía. Utiliza la unidad Rems en su fuente para que pueda trabajar proporcionalmente desde la cuadrícula de referencia. Sass Line utiliza un ritmo vertical preciso basado en la cuadrícula de línea 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.

11. Andy.scss

Andy.scss es una colección de mixins útiles de Sass, creada para ayudarte a desarrollar el aspecto de un sitio web con facilidad mientras lo mantienes liviano. Hay docenas de mixins de Sass disponibles, desde fondos hasta animaciones. Casi todas las propiedades comunes de CSS usadas se tratan aquí. Obténgalo en Github.

Más publicaciones en Sass:

• Comenzando con Sass
• Excavando 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 de CSS comparados: Sass vs. MENOS
• Hojas de estilo sintácticamente impresionantes: Usando Compass In Sass
• Cómo convertir CSS a Sass y SCSS

13 navegadores web alternativos para teléfonos inteligentes

Con la llegada de los teléfonos inteligentes y la disponibilidad de Internet de alta velocidad, también se impulsa la locura por las aplicaciones de teléfonos móviles con características únicas y útiles . Teniendo en cuenta esta locura, una de las aplicaciones principales y muy importantes para acceder a páginas web y sitios web es el navegador web.Todos u

(Consejos de tecnología y diseño)

50 diseños de factura creativa para su inspiración

La facturación no es una tarea divertida, pero es necesaria para pagar sus facturas y mantener su negocio en marcha. Además de lo que está facturando a sus clientes y clientes, su factura también contiene información importante que es importante para mantener sus cuentas en buen camino. Por lo tanto, es necesario que el diseño de la factura esté organizado, estructurado y adecuadamente detallado.En una

(Consejos de tecnología y diseño)