ฉันจะแปลงสีฐานสิบหกเป็น rgba ด้วยคอมไพเลอร์น้อยได้อย่างไร

131

ฉันมีรหัสต่อไปนี้:

@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));

ฉันต้องแปลงไป@colorrgba(209, 72, 54, 1)

ดังนั้นฉันต้องแทนที่rgba(209, 72, 54, 1)ในรหัสของฉันด้วยฟังก์ชั่นน้อยที่สร้างrgba()มูลค่าจาก@colorตัวแปรของฉัน

ฉันจะทำสิ่งนี้กับ Less ได้อย่างไร

css less

— chubbyk
แหล่งที่มา

3

ฟังก์ชั่น fadein / fadeout / fade ไม่ได้ทำในสิ่งที่คุณต้องการหรือไม่? lesscss.org/#reference

— cimmanon

348

fadeที่จริงภาษาน้อยมาพร้อมกับฟังก์ชั่นที่ฝังตัวที่เรียกว่า คุณส่งผ่านวัตถุสีและ% ความทึบสัมบูรณ์ (ค่าที่สูงกว่าหมายถึงความโปร่งใสน้อยกว่า):

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

— Ronald Pauffert
แหล่งที่มา

42

@Soc ตอบคำถามของ OP แต่คุณให้คำตอบกับเราทุกคนมาหาที่นี่! ขอบคุณ!

— BillyNair

1

ฉันคิดว่าพารามิเตอร์จำนวนไม่ได้เป็นระดับความโปร่งใส แต่ในทางตรงกันข้ามกำหนดระดับความทึบหรือไม่

— mousio

2

@mousio จริง ๆ แล้วโดยการเลือก50%อย่างถูกต้องทั้งความโปร่งใสและความทึบ :)

— Dem Pilafian

1

@mousio หากคุณต้องการได้รับเทคนิคจริง ๆ ฉันเชื่อว่ามันเป็นสัดส่วนที่ถูกต้องของสี "โปร่งแสง" เพื่อผสมผสานกับสีของแต่ละพิกเซลที่องค์ประกอบซ้อนทับ - ดูen.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) แต่ในแง่ปฏิบัติแน่นอนคุณพูดถูก; เปอร์เซ็นต์หรือค่าทศนิยมแสดงถึงระดับความทึบไม่ใช่ระดับโปร่งใส!

— Brian Lacy

5

สำหรับบันทึกนี้เป็นข้อบกพร่องใน API ฉันต้องค้นหามันทุกครั้งที่ต้องการใช้ มันจะเป็นการดีที่พวกเขาจะทำให้ RGBA ที่มีอยู่หมดลงในการเรียกน้อยกว่าเช่น SASS ทำ - rgba (@colorValue, .5) เพื่อที่มันจะเอาท์พุท hing ที่แน่นอนเหมือนกับการประกาศ CSS rgba จริง แต่เดี๋ยวก่อนนั่นฉันกำลังสะอื้น :)

— dudewad

105

หากคุณไม่ต้องการคีย์อัลฟ่าคุณสามารถใช้การแสดงสีฐานสิบหก สี rgba ที่มีค่าอัลฟาเป็น '1' จะเหมือนกับค่าเลขฐานสิบหก

นี่คือตัวอย่างที่แสดงให้เห็นว่า:

@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; */
}

ทดสอบรหัสนี้ออนไลน์: http://lesstester.com/

— Sebastian Stiehl
แหล่งที่มา

ฉันได้รับข้อผิดพลาดนี้ไหม error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto

สิ่งนี้ยังไม่ได้รับการปรับปรุงชั่วขณะ แต่ด้วย PHP น้อยฉันได้รับข้อผิดพลาดต่อไปนี้ -

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

ข้อผิดพลาดคือ - ไม่สามารถรวบรวมไฟล์ CSS (screen.less): สีที่คาดไว้สำหรับสีแดง (): ล้มเหลวที่ `background-color: rgba ( สีแดง (@colorGold), สีเขียว (@colorGold), สีฟ้า (@colorGold) 0.3);

— Chris

1

@Chris คุณสามารถกำหนดสีโดยตรงเพื่อให้งานนี้กับ Less PHP ดูเหมือนว่ายังทำงานกับเวอร์ชันปัจจุบันที่น้อยลงดังนั้นฉันจึงปรับตัวอย่าง @colorGold: #C6AF87;

— Sebastian Stiehl

@ So นี่เป็นวิธีแก้ปัญหาในที่สุดของฉันและฉันพบว่าไม่นานหลังจากที่ฉันไม่รู้ว่าอะไรทำให้ฉันประทับใจฉันต้องห่อมันในแท็กสี!

— คริส

ตรวจสอบฟังก์ชั่นน้อยลงของฉันstackoverflow.com/questions/14860874/…

— helpse

12

Mixin น้อยของฉัน:

.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
    }
}

ลองมัน.

แก้ไข: เท่าที่เห็นบนพื้นหลัง rgba กับทางเลือกตัวกรอง IE: IE9 ทำให้ทั้งสอง! ฉันเพิ่มบางบรรทัดใน mixin

— helpse
แหล่งที่มา

2

ดูเหมือนว่าด้วยการอัพเดทน้อยกว่า3.81คุณสามารถใช้เพียงสองอาร์กิวเมนต์ในฟังก์ชัน rgba ()

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

มันทำงานสำหรับฉัน แต่ฉันไม่สามารถหาได้ในเอกสารอย่างเป็นทางการ

— Dmitry Davydov
แหล่งที่มา