Як перетворити шістнадцятковий колір у 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));

Мені потрібно перетворити @colorв rgba(209, 72, 54, 1).

Тому мені потрібно замінити rgba(209, 72, 54, 1)в своєму коді функцію Менше, яка генерує rgba()значення з моєї @colorзмінної.

Як я можу це зробити з меншою?

css less

— чубчик
джерело

3

Чи функції fadein / fadeout / fade не виконують те, що потрібно? lesscss.org/#reference

— cimmanon

348

Насправді, Менше мови поставляється із вбудованою функцією, яка називається fade. Ви передаєте кольоровий об'єкт і абсолютну непрозорість% (вище значення означає менш прозорий):

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

— Рональд Пауфферт
джерело

42

@Soc відповів на питання ОП, але ти дав нам відповідь, КОЖНЕ ІНШЕ прийшов сюди знайти! Дякую!

— BillyNair

1

Я думаю, що параметр суми не є рівнем прозорості, а навпаки позначає рівень непрозорості?

— мусіо

2

@mousio Насправді, точно підібравши 50%, це правильно і прозорість, і непрозорість. :)

— Dem Pilafian

1

@mousio Якщо ви хочете отримати справді технічний, я вважаю, що більш точно пропорція "напівпрозорого" кольору поєднується з кольором кожного пікселя, який елемент накладає - див. en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Але в практичному плані, звичайно, ти маєш рацію; відсоткове або десяткове значення представляє рівень непрозорості, а не рівень прозорості!

— Брайан Лейсі

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/

— Себастьян Штіль
джерело

Як щодо цієї помилки я отримав? 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 (без екрана): колір, очікуваний для червоного (): не вдалося в `background-color: rgba ( червоний (@colorGold), зелений (@colorGold), синій (@colorGold), 0,3);

— Кріс

1

@Chris ви можете призначити колір безпосередньо, щоб зробити цю роботу з Менше PHP, здається, це також працює з поточною меншою версією, тому я адаптував приклад. @colorGold: #C6AF87;

— Себастьян Штіль

@Soc це було моїм можливим рішенням, і я знайшов це незабаром після того, як я не знаю, що створило враження, що мені потрібно обернути його кольоровими тегами!

— Кріс

Перевірте мій менше функцій, stackoverflow.com/questions/14860874 / ...

— helpse

12

Мій менше міксин:

.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 робить обоє! , Я додав кілька рядків до міксину.

— helpse
джерело

2

Здається, що з останнім меншим оновленням 3.81 ви можете використовувати лише два аргументи у функції rgba ().

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

Це працює для мене, але я не можу знайти його в офіційній документації .

— Дмитро Давидов
джерело