web-dev-qa-db-fra.com

Comment créer un calc mixin à utiliser comme expression pour générer des tags?

Je travaille sur une feuille de style sass dans laquelle je souhaite utiliser l'élément calc pour dimensionner dynamiquement du contenu. L'élément calc n'ayant pas été normalisé, je dois cibler calc(), -moz-calc() et -webkit-calc().

Existe-t-il un moyen pour moi de créer un mixin ou une fonction auquel je puisse transmettre une expression afin qu’elle génère les balises requises pouvant ensuite être définies en tant que width ou height?

csscss3sass
40
secretformula

Ce serait un basique mixin avec un argument , heureusement, les expressions ne sont pas spécifiques au navigateur dans la portée prise en charge:

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

.test {
  @include calc(width, "25% - 1em");
}

Rendra comme

.test {
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);
}

Vous voudrez peut-être inclure une valeur "par défaut" lorsque le calcul n'est pas pris en charge.

85
o.v.

Compass propose un utilitaire partagé pour ajouter des préfixes de fournisseur pour une telle occasion.

@import "compass/css3/shared";

$experimental-support-for-opera: true; // Optional, since it's off by default

.test {
  @include experimental-value(width, calc(25% - 1em));
}
10
steveluscher

L'utilisation de calc peut être réalisée assez facilement en utilisant la fonctionnalité d'annulation de devis:

$variable: 100%
height: $variable //for browsers that don't support the calc function  
height:unquote("-moz-calc(")$variable unquote("+ 44px)")
height:unquote("-o-calc(")$variable unquote("+ 44px)")
height:unquote("-webkit-calc(")$variable unquote("+ 44px)")   
height:unquote("calc(")$variable unquote("+ 44px)")

rendra comme:

height: 100%;
height: -moz-calc( 100% + 44px);
height: -o-calc( 100% + 44px);
height: -webkit-calc( 100% + 44px);
height: calc( 100% + 44px);

Vous pouvez également essayer de créer le mix comme suggéré ci-dessus, mais le mien est légèrement différent:

$var1: 1
$var2: $var1 * 100%
@mixin calc($property, $variable, $operation, $value, $fallback)
 #{$property}: $fallback //for browsers that don't support calc function
 #{$property}: -mox-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -o-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -webkit-calc(#{$variable} #{$operation} #{$value})
 #{$property}: calc(#{$variable} #{$operation} #{$value})

.item     
 @include calc(height, $var1 / $var2, "+", 44px, $var1 / $var2 - 2%)

rendra comme:

.item {
height: 98%;
height: -mox-calc(100% + 44px);
height: -o-calc(100% + 44px);
height: -webkit-calc(100% + 44px);
height: calc(100% + 44px);
}
4
aaronmallen

Une autre façon de l'écrire:

@mixin calc($prop, $val) {
  @each $pre in -webkit-, -moz-, -o- {
    #{$prop}: $pre + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

.myClass {
  @include calc(width, "25% - 1em");
}

Je pense que c'est plus élégant.

0
Ben Kalsky