Подтвердить что ты не робот

LESS CSS Pass mixin как параметр для другого mixin

Есть ли способ передать одно объявление mixin или стиля другому mixin в качестве входного параметра?

Посмотрим на пример с ключевыми кадрами анимации. Ниже мы определяем ключевые кадры в чистом CSS:

@-moz-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@-webkit-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

Идея заключается в упрощении этих объявлений с помощью mixins, поэтому мы можем иметь что-то вроде следующего:

.keyframes(name, from, to)
{
    // here we need somehow to reproduce structure
    // that we have in an example above
}

// define one animation
.my-from() { color: red; }
.my-to() { color: blue; }
// the following won't work because you cannot pass mixin as a parameter
// in way I have here, so I am looking for a way to solve this problem
.keyframes('some-name', .my-from, .my-to);

// define another animation
.another-from() { font-size: 1em; }
.another-to() { font-size: 2em; }
.keyframes('another-name', .another-from, .another-to);

Система будет иметь разные модули, которые могут быть динамически привязаны к приложению, а также удалены. Поэтому не предлагайте мне использовать @import, потому что это не так. Вывод CSS динамически компилируется на лету с использованием информации о модулях и их собственных стилях LESS, а также базовых зависимостей LESS, таких как библиотека mixins и т.д.

Примечание. Это будет работать для меня, если вы знаете способ передать определение класса вместо mixin. В приведенном выше примере это будет .my-from вместо .my-from() и т.д.

4b9b3361

Ответ 1

ОБНОВЛЕНО для МЕНЬШЕ 1.7.0+ (Упрощение WAY)

Мы можем сделать это гораздо более прямо сейчас с обновлением 1.7.0 и возможностью создать набор правил и использовать переменные в настройке @keyframes.

Теперь мы действительно можем передать mixin через параметр с помощью набора правил, или мы можем передать сами свойства. Поэтому рассмотрим следующее:

МЕНЬШЕ (используя 1.7)

.keyframes(@name, @from, @to) {
    @frames: {
        from { @from(); }
        to { @to(); }
    };
    @pre: -moz-keyframes;
    @-moz-keyframes @name
    {
       @frames();
    }

    @-webkit-keyframes @name
    {
       @frames();
    }

    @keyframes @name
    {
       @frames();
    }
}

.keyframes(testName, {color: red; .myMix(0);}, {color: blue; .myMix(1);});

.myMix(@value) {opacity: @value;}

Обратите внимание, что я передаю как настройку свойства, так и вызов mixin, а мой вывод:

Выход CSS

@-moz-keyframes testName {
  from {
    color: red;
    opacity: 0;
  }
  to {
    color: blue;
    opacity: 1;
  }
}
@-webkit-keyframes testName {
  from {
    color: red;
    opacity: 0;
  }
  to {
    color: blue;
    opacity: 1;
  }
}
@keyframes testName {
  from {
    color: red;
    opacity: 0;
  }
  to {
    color: blue;
    opacity: 1;
  }
}

Обратите внимание, как передаются правила в скобках {...}, а затем вызывается через @from() и @to() (очень похоже на вызов mixin). Я использую эти принятые наборы правил для установки другого набора правил @frames, который затем сам вызывается для заполнения определений ключевых кадров.

В общем

Здесь я передаю приватный mixin в другой mixin и затем вызываю его из этого другого mixin:

МЕНЬШЕ

.someMixin(@class; @expectedMixin) {
    [email protected]{class} {
      @expectedMixin();
      .myPrivateMix(0.6);
      test: 1;
    }
}

.someMixin(newClass; {.myClass;});

.myClass {
  .myPrivateMix(@value) {opacity: @value;}
}

Выход CSS

.newClass {
  opacity: 0.6;
  test: 1;
}

Удерживает нижеследующее для устаревшей информации.

Обновлено (добавлена ​​поддержка LESS 1.4.0+)

Ничего себе, это заняло некоторое время, но я думаю, что у меня есть кое-что, с чем вы можете работать. Однако в ваших модулях требуется определенное определение ваших миксинов, в частности, используя соответствие шаблону. Так что...

Сначала определите микшинг модуля

Обратите внимание на то, как модули mixins, предназначенные для использования в определенном будущем mixin, определяются с тем же именем mixin, но с другим именем шаблона. Это было ключом к выполнению этой работы.

// define one animation in a module
.from(my-from){ color: red; }
.to(my-to) { color: blue; }

// define one animation in another module
.from(another-from){ font-size: 1em; }
.to(another-to) { font-size: 2em; }

Если вы также хотите использовать отдельные имена микширования в модулях, вы должны это сделать:

// define one animation in a module
.my-from(){ color: red; }
.my-to() { color: blue; }

.from(my-from){ .my-from() }
.to(my-to) { .my-to() }   

// define one animation in another module
.another-from(){ font-size: 1em; }
.another-to() { font-size: 2em; }

.from(another-from){ .another-from() }
.to(another-to) { .another-to() }

Это должно позволить вызвать либо прямой mixin .my-from(), либо сделать его доступным для переменных в последующих микшинах, которые обращаются к сингулярной группе .from() mixin через сопоставление шаблонов.

Далее, Определите свой Mixin

Для вашего примера @keyframes это было чрезвычайно сложно. Фактически, ответ на переполнение стека был жизненно необходим, чтобы помочь мне решить проблему с применением @name, который не применялся при нормальном LESS из-за этого, следуя определению @keyframes. Решение применить @name выглядит противно, но оно работает. У него есть, пожалуй, неудачная необходимость также определять селекторную строку для воспроизведения анимации (потому что она использует эту строку, чтобы помочь построить последний } ключевых кадров). Это ограничение имен будет справедливо только для строк css, начинающихся с @ как @keyframes и, вероятно, @media.

Кроме того, поскольку у нас есть стандартное имя mixin, используемое в наших файлах модулей, мы можем получить доступ к этому последовательно в нашем новом mixin, в то же время передавая переменную in, чтобы выбрать правильное изменение этого mixin через совпадение шаблона. Итак, мы получаем:

МЕНЬШЕ 1.3.3 или под

// define mixin in mixin file

.keyframes(@selector, @name, @from, @to) {
    @newline: `"\n"`; // Newline
    .setVendor(@pre, @post, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
            .from(@from); 
        }    
        to  { 
            .to(@to);
        }
       .Local(){}
       .Local() when (@post=1) {
           (~"}@{newline}@{selector}") {
              -moz-animation: @name;
              -webkit-animation: @name;
              -o-animation: @name;
              -ms-animation: @name;
              animation: @name;
           } 
       }    
       .Local;
    } 
    .setVendor(""            , 0,    "-moz-");
    .setVendor(~"}@{newline}", 0, "-webkit-");
    .setVendor(~"}@{newline}", 0,      "-o-");
    .setVendor(~"}@{newline}", 0,     "-ms-");
    .setVendor(~"}@{newline}", 1,         "");
}

МЕНЬШЕ 1.4.0 +

.keyframes(@selector, @name, @from, @to) {
    @newline: `"\n"`; // Newline
    .setVendor(@pre, @post, @vendor) {
        @frames: ~"@{pre}@@{vendor}keyframes @{name} {@{newline}from";
        @{frames} {
            .from(@from); 
        }    
        to  { 
            .to(@to);
        }
       .Local(){}
       .Local() when (@post=1) {
           @animationSector: ~"}@{newline}@{selector}";
           @{animationSector} {
              -moz-animation: @name;
              -webkit-animation: @name;
              -o-animation: @name;
              -ms-animation: @name;
              animation: @name;
           } 
       }    
       .Local;
    } 
    .setVendor(""            , 0,    "-moz-");
    .setVendor(~"}@{newline}", 0, "-webkit-");
    .setVendor(~"}@{newline}", 0,      "-o-");
    .setVendor(~"}@{newline}", 0,     "-ms-");
    .setVendor(~"}@{newline}", 1,         "");
}

Теперь вызовите свой микшинг

Вы можете дать ему свое имя и просто передать прямой шаблон (все не являются точкой [.] и без кавычек) для совпадений шаблонов в модулях mixins, но не забывайте, что вам также нужна строка селектора (который цитируется), чтобы заставить mixin работать правильно:

.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);

Что дает желаемый результат

@-moz-keyframes some-name {
from {
  color: red;
}
to {
  color: blue;
}
}
@-webkit-keyframes some-name {
from {
  color: red;
}
to {
  color: blue;
}
}
@-o-keyframes some-name {
from {
  color: red;
}
to {
  color: blue;
}
}
@-ms-keyframes some-name {
from {
  color: red;
}
to {
  color: blue;
}
}
@keyframes some-name {
from {
  color: red;
}
to {
  color: blue;
}
}
.changeColor {
  -moz-animation: some-name;
  -webkit-animation: some-name;
  -o-animation: some-name;
  -ms-animation: some-name;
  animation: some-name;
}
@-moz-keyframes another-name {
from {
  font-size: 1em;
}
to {
  font-size: 2em;
}
}
@-webkit-keyframes another-name {
from {
  font-size: 1em;
}
to {
  font-size: 2em;
}
}
@-o-keyframes another-name {
from {
  font-size: 1em;
}
to {
  font-size: 2em;
}
}
@-ms-keyframes another-name {
from {
  font-size: 1em;
}
to {
  font-size: 2em;
}
}
@keyframes another-name {
from {
  font-size: 1em;
}
to {
  font-size: 2em;
}
}
.changeFontSize {
  -moz-animation: another-name
  -webkit-animation: another-name;
  -o-animation: another-name;
  -ms-animation: another-name;
  animation: another-name;
}

Ответ 2

Облегчение

Я просто упростил путь ScottS, разделив @keframes на -анимация:

.keyframes(@name, @from, @to) {
    @newline: `"\n"`;
    .Local(@x){};
    .Local(@x) when (@x="") {(~"}@{newline}/*"){a:a}/**/};

    .setVendor(@pre, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
            .from(@from);
        }
        to {
            .to(@to);
        }
        .Local(@vendor);
    }
    .setVendor(""            , "-webkit-");
    .setVendor(~"}@{newline}",    "-moz-");
    .setVendor(~"}@{newline}",      "-o-");
    .setVendor(~"}@{newline}",         "");
}

.animation(...) {
  -webkit-animation: @arguments;
     -moz-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

Использование:

.from(a1-from){ width: 10px; }
.to(a1-to) { width: 20px; }
.keyframes(a1-animation, a1-from, a1-to);


.selector {
    // some other css
    .animation(a1-animation 1s infinite linear);
}

Выход:

@-webkit-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@-moz-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@-o-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
/* {
  a: a;
}
/**/


.selector {
  // some other css
  -webkit-animation: a1-animation 1s infinite linear;
  -moz-animation: a1-animation 1s infinite linear;
  -o-animation: a1-animation 1s infinite linear;
  animation: a1-animation 1s infinite linear;
}

небольшая проблема:

Итак, анимация теперь отделена от @keyframes, но мы получили оплату. Существует неприятное:

/* {
  a: a;
}
/**/

но это не должно быть проблемой - возможно, все мы нажимаем файлы CSS через любые типы minifiers, которые вырезают комментарии.

Ответ 3

Вы также можете использовать мое решение для генерации ключевых фреймов CSS: https://github.com/thybzi/keyframes

Особенности:

  • Генерация ключевых фреймов кросс-браузера (Firefox 5+, Chrome 3+, Safari 4+, Opera 12+, IE 10 +)
  • До 16 временных точек в каждом правиле keyframes (и число может быть легко добавлено, если необходимо)
  • Микшины, переменные и функции могут использоваться для тайм-аутов стиля
  • Ключевые кадры создаются отдельно от правил animation, поэтому:
    • несколько правил animation могут использовать один и тот же ключевой кадр с разными значениями для синхронизации, повторения и т.д.
    • несколько анимаций могут использоваться в пределах того же правила animation
    • анимации могут быть применены (не созданы!) внутри любого родительского селектора
  • Легкий и (почти) аккуратный код LESS

Основное использование:

// Preparing styles for animation points
.keyframes-item(fadeIn, 0%) {
    opacity: 0;
}
.keyframes-item(fadeIn, 100%) {
    opacity: 1;
}
// Generating keyframes
.keyframes(fadeIn);

// Applying animation to fade-in block in 1.5 seconds
.myBlock {
    .animation(fadeIn 1.5s);
}

Ответ 4

Совсем не так, как вы будете использовать mixins.

Вы должны сделать что-то вроде:

.mixin-one { ... }
.mixin-two { ... }
.target-style {
    .mixin-one;
    .mixin-two;
    font-family: 'Comic Sans MS';
    color: magenta;
}