Sass - Konversi Hex ke RGBa untuk opacity latar belakang

213

Saya memiliki Sass mixin berikut, yang merupakan modifikasi setengah lengkap dari contoh RGBa :

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

Saya sudah menerapkan $opacityok, tapi sekarang saya terjebak dengan $colorbagian itu. Warna yang akan saya kirim ke mixin adalah HEX bukan RGB.

Penggunaan contoh saya adalah:

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

Bagaimana saya bisa menggunakan nilai HEX dalam mixin ini?

css sass background-color mixins rgba Rick Donohoe
sumber

Jawaban:

414

Fungsi rgba () dapat menerima warna hex tunggal serta nilai RGB desimal. Sebagai contoh, ini akan bekerja dengan baik:

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

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

Namun, jika Anda perlu memecah warna heks menjadi komponen RGB, Anda dapat menggunakan fungsi merah () , hijau () , dan biru () untuk melakukannya:

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

background: rgb($red, $green, $blue); /* same as using "background: $color" */
hopper
sumber
Aku bersumpah aku mencoba ini DAN fungsi r, b, g dan tidak berhasil. Saya menggunakan warna dinamis dari back-end Drupal yang mungkin telah merusak sesuatu. Tetap saja, urutkan pada akhirnya dan jawaban yang saya temukan setelah penelitian lebih lanjut +1
Rick Donohoe
1
TAPI, apa hex setara dengan # ($ color + $ opacity)? - ini mungkin berguna. bisa dilakukan
Suatu hari arah
2
Sejauh pengetahuan saya, RGBA menambahkan opacity , yang berarti Anda dapat melihat elemen di baliknya. Dengan standar hex, Anda tidak dapat melakukan ini.
Richard Peck
Terima kasih. Tidak pernah terpikir untuk mencoba hex pada rgb !
RayViljoen
2
Lebih baik menggunakan rgba($color, $alpha)suka rgba(#000000, 0.6)karena hasilnya sama dan tidak perlu menemukan kembali roda. ;)
lbartolik
118

Ada builtin mixin: transparentize($color, $amount);

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

Jumlahnya harus antara 0 hingga 1;

Dokumentasi Sass Resmi (Modul: Sass :: Script :: Fungsi)

pengguna3631047
sumber
1
Saya suka ini! Sangat bagus untuk implementasi browser modern.
Mike Kormendy
16
sebagai catatan: jumlah $ adalah jumlah yang akan dikurangkan, bukan nilai yang ingin Anda tetapkan
MMachinegun
3
Berfungsi hebat kecuali jumlahnya tampaknya menjadi makna terbalik yang ingin Anda jadikan 90%transparan untuk mendapatkan hasilnya.1
Patrick Mencias-lewis
aneh. tidak ada orang yang belum membaca dokumentasi akan curiga ada fungsi "transparankan" sangat membantu, terima kasih!
tobybot
Jawaban yang bagus Ini harus menjadi jawaban yang diterima. Terima kasih. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);bekerja untukku.
Ryan
34

SASS memiliki fungsi rgba () bawaan untuk mengevaluasi nilai.

rgba($color, $alpha)

Misalnya

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

Contoh menggunakan variabel Anda sendiri:

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

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

Keluaran:

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

Anda dapat mencoba solusi ini, adalah yang terbaik ... 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
sumber
5
Jawaban Anda bagus tetapi tampaknya tidak perlu rumit. Saya menduga nuansa transparan tidak relevan dengan pertanyaan saya, meskipun dapatkah Anda menjelaskan tentang kelas latar belakang transparan? Saya berasumsi saya tidak membutuhkannya jika saya tidak menggunakan mixin nuansa transparan?
Rick Donohoe
@ RickDonohoe, sejauh yang saya ingat, z-index: 1, dan latar belakang transparan adalah mundur untuk IE <9. Saya pikir m.Eloutafi memasukkannya ke dalam kelas yang terpisah, untuk penggunaan lebih lanjut dalam kebutuhan lain. Tonton baris dalam jawaban yang dimulai dengan "Dari:" ...
Roman M. Koss
2

Jika Anda perlu mencampur warna dari transparansi variabel dan alpha, dan dengan solusi yang menyertakan rgba()fungsi Anda akan mendapatkan kesalahan

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

Sesuatu seperti ini mungkin berguna.

$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
sumber