Convierta PX a EM en SCSS
Al desarrollar sitios web receptivos, es importante utilizar una unidad no absoluta. Em es perfecto para esto, ya que es relativo al tamaño de fuente base. Si, como yo, creciste …
Leer másmixin
SASS Opacity Mixin
CSS Opacity SASS Mixin para IE, FireFox, Chrome y Safari @mixin Opacity($value){ $IEValue: $value*100; opacity: $value; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=”+$IEValue+”)”; filter: alpha(opacity=$IEValue);} Cómo utilizar img.preload{ @include Opacity(0); &.complete{ @include Opacity(1); }} http://conpanna.net
Leer másTransición Mixin con múltiples prefijos de proveedores
Este Mixin aprovecha cada bucle de Sass para cubrir múltiples prefijos de proveedores y facilitar la inclusión de transiciones con una sola inclusión. Fue escrito para ser limpio y pequeño. …
Leer másCuadrícula receptiva simple con SCSS
Es realmente sencillo crear su propia cuadrícula con SCSS. ¡Echa un vistazo a este consejo! // Variables$cols: 12;$max-wrapper-width: 920px;$gutter-width: 20px;// [email protected] col($col) { width: (($max-wrapper-width – $gutter-width*($cols/$col – 1))/($cols/$col))/$max-wrapper-width*100%;}// Loop …
Leer másUn @mixin para el reemplazo de fuentes en SASS
Escribí este útil @mixin para reemplazar o cambiar la fuente predeterminada de un sitio web. // Variables – default font $defSize: 12px;$defStyle: normal;$defLetterSpacing: 0px;// Change the font using [email protected] switch-font( …
Leer másRelación intrínseca menos mezcla
En 2009, Thierry Koblentz escribió sobre ratios intrínsecos , específicamente en lo que respecta a los videos. A estas alturas se utilizan en todas partes, o deberían serlo, gracias a …
Leer másbackground / color / conditional / else / foreground / gradient / if / lightness / mixin / operator / sass / scss / test / text
Pruebe la luminosidad del color con los condicionales de Sass
¿Alguna vez quisiste probar la claridad de un color con Sass? Usted puede hacer eso. Un caso de uso de ejemplo sería una combinación de botones predeterminados. Pruebe la claridad …
Leer másSASS ClearFix Mixin
CSS Clear FIx Mixin para SASS # [email protected] clearFix(){ &:before, &:after{ content: ” “; display: table; } &:after{ display: block; clear: both; height: 1px; margin-top: -1px; visibility: hidden; } &{ …
Leer mássass mixin para tamaño de fuente remoto y altura de línea con respaldo de px
@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) { font-size: ($sizeValue) + px; line-height: ($line) + px; font-size: ($sizeValue / 16) + rem; line-height: ($line / 16) + rem;}
Leer másSass Media Queries Mixins
En lugar de escribir expresiones CSS largas, puede hacerlo más simple con estos mixins. Puede obtener más información aquí: https://github.com/paranoida/sass-mediaqueries $units: 1px !default;@mixin screen($res-first, $res-last: $res-first){ @if $res-first == $res-last …
Leer másMezcla de prefijos de proveedores de CSS3
Este es un mixin útil que nos ayuda a agregar el prefijo de proveedor cuando usamos CSS3. Simplemente agregue este mixin a las propiedades de css3 que necesitan agregar proveedor. …
Leer mássass / middleman: mixin indefinido durante la exportación o cómo arreglar una exportación css de 25000 líneas
En resumen: ¿Obtienes el error sass “indefinido mixin” y estás seguro de que ese mixin está dentro del alcance? Verifique todos sus archivos parciales de Sass para un subrayado inicial. …
Leer máslodash mixin _.objectRange: Crea una matriz de objetos a partir de la plantilla
Cree una matriz de objetos utilizando otro objeto como plantilla. _.mixin({ ‘objectRange’: function objectRange(count, object) { return _.range(count).map(function () { return _.clone(object); }); }});
Leer másTamaño de fuente con REMS mixin.
Nunca fui realmente un fanático de los EM porque la mitad de las veces necesitas un título en matemáticas para mantenerte al día con lo profundo que has llegado. Los …
Leer más