MOINS Mixin/Fonction pour changer un @Couleur HEX à RGBA pour PASSER dans un autre mixin

Je veux convertir une base de couleur en HEXADÉCIMAL (@couleur) à rgba et de l'utiliser dans un mixin comme .box-shadow(x y b couleur);

J'ai vu une charge de mixin pour convertir HEX à RGBA et d'arrière-plan-couleur, et je sais que je peux créer mon propre mélange de box-shadow. Mais est-il un générique solution de sorte que nous pouvons utiliser n'importe quel mixin.

Essayé/voulez quelque chose de ce genre (ne fonctionne pas) :

/** Extend LESS functions like (lighten, darken, mix) **/
rgbaColorIn(@color, @opacity : 1){
  return rgba( red(@color), green(@color), blue(@color), @opacity );
}

//----- or ------

/** Passing in a reference to mixin and params **/
.rgbaColorIn(@selector, @params, @color, @opacity : 1){
  @rgbaColor: rgba( red(@color), green(@color), blue(@color), @opacity );
  @selector(@params @color);
}
Voulez-vous dire que vous voulez l'appeler quelque chose comme .rgbaColorIn(red, 50%) et obtenir rgba(255, 0, 0, 0.5)?

OriginalL'auteur Labithiotis | 2014-03-11

  1. 24

    Il n'y a pas de return mot-clé en moins. Si vous voulez un mixin qui retourne une valeur, vous pouvez définir une variable à l'intérieur, par exemple:

    .rgbaColorIn(@color, @opacity : 1){
  @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

    auquel vous pouvez accéder dans le champ d'application que vous appelez le mixin:

    .section {
  .rgbaColorIn(red, 50%);
  background-color: @result;
}

    Mais si vous voulez juste pour générer une LED à partir d'une couleur RVB, vous pouvez utiliser le fade fonction:

    .section {
  @result: fade(red, 50%);
  background-color: @result;
}

    qui rendra le même résultat en CSS:

    .section {
  background-color: rgba(255, 0, 0, 0.5);
}

    Un .box-shadow mixin pour passer le RVB de la couleur et de l'opacité/alpha séparément pourrait être quelque chose comme ceci:

    .box-shadow(@x; @y; @b; @color; @opacity) {
   box-shadow: @x @y @b fade(@color, @opacity);
   -moz-box-shadow: @x @y @b fade(@color, @opacity);
   -webkit-box-shadow: @x @y @b fade(@color, @opacity);
}

    Que vous pourriez utiliser dans un sélecteur comme ceci:

    .section {
  .box-shadow(2px; 2px; 1px; pink; 50%);
}

    et obtenir ce CSS:

    .section {
  box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -moz-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -webkit-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
}
    À l'aide de fondu est un bon truc, ty!
    J'aime SASS approche du mieux... vous pouvez simplement utiliser le rgba fonction: rgba($colorvariable,.4)

    OriginalL'auteur helderdarocha

  2. 11

    Pour obtenir une valeur rgba (en supposant que vous êtes en lui donnant quelque chose d'autre que 100% d'opacité, depuis MOINS de sera simplement le garder comme une valeur hexadécimale dans ce cas), il suffit de utilisation de l'option fondu() function. Alors...

    MOINS

    @color: #ff0000;

.test {
  box-shadow: 2px 2px 5px fade(@color, 99%); 
}

    CSS Sortie

    .test {
  box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.99);
}

    OriginalL'auteur ScottS

  3. 1

    De bonnes réponses, je suppose que vous avez également pu faire appel directement une zone d'ombre de la croix-navigateur fonction:

    .toShadow(@color: red) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  .box-shadow(~"inset 0 0 3px @{color-rgba}");
}
    Que pensez-vous @helderdarocha

    OriginalL'auteur Mattos