Sass - Arka plan opaklığı için Hex'i RGBa'ya dönüştürme

213

Bir RGBa örneğinin yarı tam modifikasyonu olan aşağıdaki Sass mixin var :

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
}

$opacityTamam uyguladım , ama şimdi $colorparçası ile sıkışıp kaldım . Karışıma göndereceğim renkler RGB değil HEX olacaktır.

Örnek kullanımım şöyle olacak:

element {
    @include background-opacity(#333, .5);
}

Bu karışımda HEX değerlerini nasıl kullanabilirim?

— Rick Donohoe
kaynak

414

RGBA () işlevi de ondalık RGB değerleri gibi tek bir altıgen rengi kabul edebilir. Örneğin, bu iyi çalışır:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

Bununla birlikte, onaltılık rengi RGB bileşenlerine bölmeniz gerekirse, bunu yapmak için kırmızı () , yeşil () ve mavi () işlevlerini kullanabilirsiniz:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

— dansçı
kaynak

Yemin ederim bunu denedim VE r, b, g fonksiyonları ve işe yaramadı. Drupal arka ucundan dinamik renkler kullanıyordum, ancak bu bir şeyleri kırmış olabilir. Yine de, sonunda ve daha fazla araştırmadan sonra bulduğum cevabı buldum +1

— Rick Donohoe

1

ANCAK, # ($ color + $ opacity) 'nin hex eşdeğeri nedir? - bu yararlı olabilir. Yapılabilir?

— somedirection

2

Bildiğim kadarıyla , RGBA opaklık ekliyor , yani arkasındaki öğeleri görebiliyorsunuz. Standart hexile bunu yapamazsınız.

— Richard Peck

Teşekkürler. Nazarı denemek için hiç düşünmedim misiniz rgb bir!

— RayViljoen

2

Sonuç aynı olduğu rgba($color, $alpha)gibi kullanmak daha rgba(#000000, 0.6)iyidir ve tekerleği yeniden icat etmeye gerek yoktur. ;)

— lbartolic

118

Yerleşik bir mixin var: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

Miktar 0 ila 1 arasında olmalıdır;

Resmi Sass Belgeleri (Modül: Sass :: Script :: İşlevler)

— user3631047
kaynak

1

Bunu severim! Modern tarayıcı uygulaması için harika.

— Mike Kormendy

16

yan not olarak: $ miktarı, ayarlamak istediğiniz değer değil, ne kadar çıkarılacağıdır

— MMachinegun

3

Miktar dışında harika çalıştı 90%, sonucu elde etmek için şeffaf hale getirmek istediğiniz ters anlam gibi görünüyor.1

— Patrick Mencias-lewis

tuhaf. belgeleri okumayan hiç kimse bir "saydamlaştırma" işlevi olduğundan şüphelenmez. çok yararlı olsa da, teşekkür ederim!

— tobybot

Mükemmel cevap. Bu kabul edilen cevap olmalı. Teşekkürler. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);benim için çalıştı.

— Ryan

34

SASS, değerleri değerlendirmek için yerleşik bir rgba () işlevine sahiptir.

rgba($color, $alpha)

Örneğin

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

Kendi değişkenlerinizi kullanan bir örnek:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

Çıktılar:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

— Reggie Pinkham
kaynak

6

Bu çözümü deneyebilirsiniz, en iyisi ... url ( github )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

— m.Elouafi
kaynak

5

Cevabınız iyi ancak gereksiz yere karmaşık görünüyor. Saydam arka plan sınıfının ne hakkında olduğunu açıklayabiliyor olsanız da, saydam gölgelerin sorumla ilgili olmadığını tahmin ediyorum. Şeffaf gölgeler mixini kullanmıyorsam buna ihtiyacım yok mu?

— Rick Donohoe

@RickDonohoe, hatırladığım kadarıyla, z-endeksi: 1 ve şeffaf arka plan IE <9 için bir geri dönüş. Ben eloutafi bunu diğer ihtiyaçlarda daha fazla kullanmak için ayrı bir sınıfa koydu. "Kimden:" ile başlayan cevap satırında izle

— Roman M. Koss

2

Değişken ve alfa saydamlığından renk karıştırmanız gerekiyorsa ve rgba()işlevi içeren çözümlerle aşağıdaki gibi bir hata alırsınız:

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   ╷
   │       background-color: rgba(#{$color}, 0.3);
   │                         ^^^^^^^^^^^^^^^^^^^^

Böyle bir şey faydalı olabilir.

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}

— Vojtech
kaynak