问题描述
有没有办法给一个混入或风格的声明传递给另一个混入作为输入参数?
Is there any way to pass one mixin or style's declaration to another mixin as an input parameter?
让我们来看看动画关键帧的例子。以下是我们如何界定在纯粹的CSS关键帧:
Let's take a look at an example with animation keyframes. Following is how we define keyframes in pure 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; }
}
想法是使用混入简化这些声明,所以我们可以有类似以下内容:
Idea is to simplify these declarations using mixins, so we can have something like following:
.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依赖像混入图书馆等动态编译上飞。
The system will have different modules that could be dynamically attached to application as well as removed. So, don't suggest me to use @import
because it's not the case. Output CSS is dynamically compiled on-fly using information about modules and their own LESS styles as well as base LESS dependencies like mixins library and etc.
请注意:它会为我工作,如果你知道一种方法来传递类的定义,而不是混入。在上面的例子将是。我 - 从
而不是。我 - 从()
等。
Note: it will work for me if you know a way to pass class definition instead of mixin. In an example above it would be .my-from
instead of .my-from()
and etc.
推荐答案
我们可以使用1.7.0更新并 ,并使用。
UPDATED for LESS 1.7.0+ (WAY Simpler)
We can do this far more directly now with the 1.7.0 update and the ability to create rulesets, and to use variables in setting @keyframes
.
现在我们确实可以通过一个参数由规则集传递一个mixin,或者我们可以通过在属性刺痛自己。因此,考虑这一点:
Now we really can pass a mixin through a parameter by a ruleset, or we can pass in the property stings themselves. So consider this:
LESS(使用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;}
请注意,我通过这两个属性设置和混入电话,我的输出是:
Note that I am passing both a property setting and a mixin call, and my output is:
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()
和 @至()
(看起来很像一个混合调用)。我使用的是这些传递的规则集来设置 @frames
的另一个规则集,然后自己称为填补了关键帧定义。
Note how the rulesets are passed, in brackets {...}
, and then called, via @from()
and @to()
(looking a lot like a mixin call). I'm using these passed rule sets to set another ruleset of @frames
which is then itself called to fill the keyframes definitions.
更一般
下面我通过一个私人混入到另一个混入然后调用它与其他mixin的:
Here I pass a private mixin to another mixin and then call it from that other mixin:
LESS
.someMixin(@class; @expectedMixin) {
.@{class} {
@expectedMixin();
.myPrivateMix(0.6);
test: 1;
}
}
.someMixin(newClass; {.myClass;});
.myClass {
.myPrivateMix(@value) {opacity: @value;}
}
CSS输出
.newClass {
opacity: 0.6;
test: 1;
}
不停的下方为传统的信息。
哇,这花了一些做的,但我想我有什么事情可以一起工作。但是,它不会把你的混入一些特殊的定义在自己的模块,具体而言,使用。所以......
Wow, this took some doing, but I think I have something you can work with. However, it does take some special defining of your mixins in your modules, specifically, using pattern matching. So...
请注意打算如何在一个特定的未来混入所使用的模块的混入与所述的相同混入名定义的,但有不同的图形名称。这是钥匙,使这项工作。
Note how the module mixins intended to be used in a specific future mixin are defined with the same mixin name, but with a different pattern name. This was key to making this work.
// 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; }
如果您也想个别混入名称的模块,你应该能够做到这一点:
If you also want individual mixin names in the modules, you should be able to do this:
// 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() }
这应该允许一个叫任直混入。我 - 从()
或使其访问奇<$ C $后来混入内可变访问通过模式匹配C>。从()混入组。
This should allow one to call either the straight mixin .my-from()
or, to make it variably accessible within later mixins that access the singular .from()
mixin group through the pattern matching.
有关你的 @keyframes
的例子,这是非常困难的。事实上,a堆栈溢出的答案 是为了帮助我解决问题与应用至关重要的 @name
,LESS,因为它的规则下这是不正常申请在 @keyframes
定义。该解决方案应用 @name
看起来坏坏的,但它的工作原理。它确实有,或许,还定义一个选择符中发挥了动画不幸的必要性(因为它使用该字符串,以帮助建立的最后一个}
的关键帧)。这种命名限制只能是与 @
开始像 @keyframes
大概 @media 。
For your @keyframes
example, that was extremely difficult. In fact, a stack overflow answer was vital to helping me solve an issue with applying the @name
, which was not applying under normal LESS rules because of it following the @keyframes
definition. The solution to apply the @name
looks nasty, but it works. It does have the, perhaps, unfortunate necessity of also defining a selector string to play the animation by (because it uses that string to help build the last }
of the keyframes). This naming limitation would only be true of css strings that begin with @
like @keyframes
and probably @media
.
此外,因为我们有我们的模块文件中使用的标准混入的名字,我们就可以访问,始终在我们的新的混入,而在同一时间通过一个变量来选择的适当变化的中通过模式匹配的混入。所以我们得到:
Further, because we have a standard mixin name used in our module files, we can access that consistently within our new mixin, while at the same time passing a variable in to select the proper variation of that mixin through a pattern match. So we get:
LESS 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, "");
}
LESS 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, "");
}
立即致电您的混入
您可以给它自己的名字,只是通过直接模式(全部为的没有的点[]和的没有的引号),该模式的模块相匹配混入,但不要忘了,你还需要选择字符串(是引用),以获得混入的工作权利:
Now Call Your Mixin
You can give it your own name, and just pass the straight pattern (all are no dot [.] and no quotes) for the pattern matches on the module mixins, but don't forget that you also need a selector string (which is quoted) to get the mixin to work right:
.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;
}
这篇关于LESS CSS通行证混入作为参数传递给另一个混入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!