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

Enseñe a sus hijos a codificar con Tynker

Dado que la tecnología es tan frecuente como lo es hoy en día, y se lanzan nuevos lenguajes de programación día por medio, no sorprende que algunos padres estén buscando que sus hijos retomen la programación a una edad temprana.La gente de Apple es muy consciente de que los programadores son cruciales en este mundo impulsado por la tecnología, por lo que la compañía se asoció con una compañía llamada Tynker para desarrollar una aplicación educativa para iPad llamada ... bueno ...

(Consejos de tecnología y diseño)

25 ejemplos de diseño de identidad de marca hecho bien

Identity branding es una parte integral del negocio . Después de todo, tienes que asegurarte de que puedes promocionarte adecuadamente. No siempre es fácil intentar crear un diseño que se adapte a sus necesidades. Algo que no solo refleja lo que representa, sino que también muestra la personalidad de su marca, ya sea su marca personal o una empresa que usted tenga.Par

(Consejos de tecnología y diseño)