Bagaimana cara mengonversi warna heksadesimal menjadi rgba dengan Less compiler?

131

Saya memiliki kode berikut:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Saya perlu mengonversi @colorke rgba(209, 72, 54, 1).

Jadi saya perlu mengganti rgba(209, 72, 54, 1)kode saya dengan fungsi Kurang yang menghasilkan rgba()nilai dari @colorvariabel saya .

Bagaimana saya bisa melakukan ini dengan Less?

css less

— gemuk
sumber

3

Apakah fungsi fadein / fadeout / fade tidak melakukan apa yang Anda butuhkan? lesscss.org/#reference

— cimmanon

348

Sebenarnya, bahasa Kurang dilengkapi dengan fungsi tertanam yang disebut fade. Anda melewatkan objek warna dan opacity absolut% (nilai lebih tinggi berarti kurang transparan):

fade(@color, 50%);   // Return @color with 50% opacity in rgba

— Ronald Pauffert
sumber

42

@ Soc menjawab pertanyaan OP, tetapi Anda memberi kami jawaban SETIAP ORANG LAIN datang ke sini untuk menemukan! Terima kasih!

— BillyNair

1

Saya pikir parameter jumlah bukan tingkat transparansi tetapi sebaliknya menunjuk tingkat opacity?

— mousio

2

@mousio Sebenarnya, dengan memilih tepat 50%, itu benar transparansi dan opacity. :)

— Dem Pilafian

1

@mousio Jika Anda ingin benar-benar teknis, saya yakin itu lebih akurat proporsi warna "tembus" untuk menyatu dengan warna setiap piksel yang elemen overlay - lihat en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Tetapi secara praktis, tentu saja Anda benar; persentase atau nilai desimal mewakili level opacity, bukan level transparansi!

— Brian Lacy

5

Sebagai catatan ini adalah cacat dalam API. Saya harus mencarinya setiap kali ingin menggunakannya. Akan bijaksana bagi mereka untuk mengubah RGBA yang ada menjadi panggilan KURANG seperti SASS tidak - rgba (@colorValue, .5) sehingga akan menghasilkan engsel yang persis sama dengan deklarasi CSS rgba yang sebenarnya. Tapi hei, itu aku merengek. :)

— dudewad

105

Jika Anda tidak memerlukan kunci alfa, Anda dapat menggunakan representasi warna heksadesimal. Warna rgba dengan alfa '1' sama dengan nilai heksadesimal.

Berikut adalah beberapa contoh untuk menunjukkan bahwa:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Uji kode ini secara online: http://lesstester.com/

— Sebastian Stiehl
sumber

Bagaimana dengan kesalahan ini yang saya dapatkan? error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto

Ini belum diperbarui untuk sementara waktu tetapi dengan PHP kurang Saya mendapatkan kesalahan berikut -

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

Kesalahan adalah - Tidak dapat mengkompilasi file CSS (screen.less): warna yang diharapkan untuk merah (): gagal di `background-color: rgba ( merah (@colorGold), hijau (@colorGold), biru (@colorGold), 0.3);

— Chris

1

@ Chris Anda dapat menetapkan warna secara langsung untuk membuat pekerjaan ini dengan PHP kurang. Tampaknya juga berfungsi dengan versi kurang saat ini jadi saya mengadaptasi contoh. @colorGold: #C6AF87;

— Sebastian Stiehl

@ Mas, ini adalah solusi akhirnya saya dan saya menemukannya segera setelah saya tidak tahu apa yang memberi saya kesan yang saya butuhkan untuk membungkusnya dengan tag warna!

— Chris

Lihat fungsi saya yang kurang, stackoverflow.com/questions/14860874/…

— helpse

12

Mixin saya kurang:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Cobalah.

DIedit: Seperti yang terlihat pada latar belakang rgba dengan alternatif filter IE: IE9 membuat keduanya! , Saya menambahkan beberapa baris ke mixin.

— bantu
sumber

2

Tampaknya dengan Pembaruan kurang baru-baru ini 3,81 , Anda dapat menggunakan hanya dua argumen di fungsi rgba ().

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

Ini bekerja untuk saya, tetapi saya tidak dapat menemukannya di dokumentasi resmi .

— Dmitry Davydov
sumber