css - Twitterのブートストラップ16進からrgbaへ?

Question

で使用される色変数をみましょうsheet.less。

色はHEX形式です#f57e20。

その色を使用したいのですが、アルファチャンネルを追加します。

で終わりたいrgba(245, 126, 32, 0.5)

ブートストラップ以下にはこれを行う何かがありますか?

Answer 1

使用できるBootstrapの組み込み関数less.jsとミックスインがいくつかあります。

これはless.js関数です：

// using a variable

@color: #f57e20;

.test {
  background: fade(@color, 50%); // return @color with 50% transparency
}

// or without the color variable

.test2 {
  background: fade(#f57e20, 50%); // return @color with 50% transparency
}

これらは両方とも次の結果になります。

.test {
  background: rgba(245, 126, 32, 0.5);
}
.test2 {
  background: rgba(245, 126, 32, 0.5);
}

または、Bootstrapミックスインを使用します。

.test3 {
  #translucent > .background(#f57e20, 0.5); // use HSLA mixin
}

その結果：

.test3 {
  background-color: rgba(244, 123, 31, 0.5);
}

（最後にチェックした） Bootstrap 3.0.0translucentで含まれなくなったため、アーカイブの目的でミックスインの（修正された）コードをここに含めます。

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: fade(@color, @alpha);
  }
  .border(@color: @white, @alpha: 1) {
    border-color: fade(@color, @alpha);
    .background-clip(padding-box);
  }
}