Линейный градиент с функцией LESS, LESS.JS -> "нераспознанный ввод"

Я хотел бы упростить мой LESS/CSS для линейного градиента с использованием переменных.

Я пытался (объявив переменную):

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);

Я попробовал (определив функцию и объединил ее с классами (".BWTable-hover") и селекторами)

        .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > td,
    .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
    }

Результат:"ParseError: Нераспознанный ввод"

Кстати, это хороший способ решить эту проблему? Ты за помощь.

Источник

1 ответ

Решение

Когда вы используете параметрический миксин (миксин с входными параметрами), он не будет производить вывод непосредственно при компиляции. Он должен быть вызван из другого блока. Это причина, почему ваш код выдавал ошибку.

Цитата из статьи на Sitepoint:

Миксины могут быть параметрическими, то есть они могут принимать аргументы для повышения своей полезности. Параметрический миксин сам по себе не выводится при компиляции. Его свойства появятся только при смешивании в другой блок.

Вместо этого вы можете сделать это следующим образом. Нажмите здесь для демонстрации.

.hover(@BWTableHoverLineMarkerColor1){
 & > tbody > tr:hover > td,
    & > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        @startcolor: argb(@BWTableHoverLineMarkerColor1); /* To convert the rgba value to hex format */
        @endcolor: argb(fade(@BWTableHoverLineMarkerColor1,45%)); /* To increase alpha for end color */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startcolor}', endColorstr='@{endcolor}',GradientType=0 ); /* IE6-8 */
    }
}

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover{
  .hover(@BWTableHoverLineMarkerColor1);
}

С другой стороны, если бы это был не параметризованный миксин, вы могли бы просто сделать, как показано ниже:

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover > tbody > tr:hover > td,
.BWTable-hover > tbody > tr:hover > th {
    background: url(data:image/svg+xml;base64,PD...g==);
    background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
    background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
}

Обратите внимание, что приведенное выше не принимает параметры и, следовательно, не может быть повторно использовано.

Источник
Другие вопросы по тегам