МЕНЬШЕ: Как я могу передать mixin в качестве аргумента в другой mixin?

Question

У меня есть некоторые основные Примеси, которые применяются некоторые правила с помощью средств массовой информации запросов

.on-small(@rules) { 
    @media (@minWidthSmall) { @rules(); } 
} 

.on-medium(@rules) { 
    @media (@minWidthMedium) { @rules(); } 
} 

// and .on-large, .on-x-large and so on 

И я пытаюсь построить очень простой гибкий на основе системы сетки, я пытаюсь передать указанные Примеси в качестве параметров, так что я может иметь общий смеситель .make-column. следующим образом:

.make-col(@break-point-mixin, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 


    /*********************************************************** 
    Is the following line possible in LESS somehow? 
    ***********************************************************/ 
    @break-point-mixin({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@break-point-mixin: .on-small, @span, @size); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@break-point-mixin: .on-medium, @span, @size); 
} 

Но, к сожалению, передавая @break-point-mixin в качестве параметра и вызвав ее внутри .make-col аварий с:

Unrecognised input. Possibly missing opening '('

Answer 1

В данном конкретном случае (в отличие от общего случая с произвольным именем подмешать) Я бы сказал, что вы пропустили тот факт, что в .on-small/.on-medium эти small и medium вещи не являются также ничего, кроме параметров и, следовательно, должны не быть частью имен mixin. Имея это в виду, что ваш пример будет выглядеть так:

.on(small, @rules) { 
    @media (@minWidthSmall) {@rules();} 
} 

.on(medium, @rules) { 
    @media (@minWidthMedium) {@rules();} 
} 

.make-col(@device, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 
    .on(@device, { 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

// usage: 

.make-col(small, @span, @size); 

же для .grid-col-on-* Mixins, они только один:

.grid-col-on(@device, @span: 1, @size: 1) { 
    .make-col(@device, @span, @size); 
} 

и так далее.

Если вы действительно хотите, гибкие/родовые сеток - никогда не жёстко устройства/останов имен в Mixin или имена переменных (для большего обоснования и примеров см https://github.com/less/less.js/issues/2702).

Answer 2

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

Вместо этого вы можете сделать что-то вроде ниже, где медиа-запрос mixin вызывается непосредственно изнутри mixer mixer вместо .make-col mixin. Поскольку обертка mixin знает о переменных, которые нужны медиа-запросу mixin, это не вызовет никаких проблем.

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-small({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-medium({ 
    width: percentage(@span/@size); 
    min-width: percentage(@span/@size); 
    }); 
} 

Если вы обеспокоены тем, переписывают правила в вышеуказанном Mixins, то вы можете установить их в набор правил, как показано ниже, и использовать его.

@colRules: { 
      width: percentage(@span/@size); 
      min-width: percentage(@span/@size); 
      }; 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-small(@colRules); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(@span, @size); 
    .on-medium(@colRules); 
} 

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

@colRules: { 
      width: percentage(@span/@size); 
      min-width: percentage(@span/@size); 
      }; 

.make-col(@breakpoint, @span, @size) { 
    flex: 1; 
    box-sizing: border-box; 
    & when (@breakpoint = s) { 
    .on-small(@colRules); /* or you could replace this with that mixin's content also */ 
    } 
    & when (@breakpoint = m) { 
    .on-medium(@colRules); 
    } 
    /* and so on for the rest */ 
} 

.grid-col-on-small(@span: 1, @size: 1) { 
    .make-col(s, @span, @size); 
} 

.grid-col-on-medium(@span: 1, @size: 1) { 
    .make-col(m, @span, @size); 
}