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
Guía para principiantes a la expresión regular (Regex)
Una expresión regular es un conjunto de caracteres que forman un patrón que se puede buscar en una cadena. Regex se puede usar para la validación, como para validar números de tarjetas de crédito, para buscar, es decir, a través de coincidencias de texto complejas, y para reemplazar texto coincidente con otra cadena. Tamb
20 diseños de estructura metálica para un estilo de vida minimalista
Si no está seguro de qué productos de malla metálica son, imagine una caja normal con un diseño especial: solo obtendrá los marcos, sin lados, ni partes superiores ni inferiores. Los productos de alambre más comunes que probablemente conozcas son, probablemente, los secadores de platos, percheros o pantallas de lámparas, pero hoy en día hay más productos que adoptan un enfoque minimalista para el diseño.Por lo ta