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

Jawaban:

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