有没有办法将一个mixin或style的声明传递给另一个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()
等等。
答案 0 :(得分:24)
我们现在可以更直接地使用1.7.0更新和create rulesets的能力以及使用variables in setting @keyframes
。
现在我们真的可以通过规则集传递一个参数mixin,或者我们可以自己传递属性stings。所以考虑一下:
少(使用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()
调用(看起来很像混音调用)。我正在使用这些传递的规则集来设置另一个@frames
规则集,然后调用它来填充关键帧定义。
更通用
在这里,我将私人mixin传递给另一个mixin,然后从其他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;
}
保留以下旧版信息。
请注意,用于特定未来mixin的模块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; }
如果您还希望模块中有单独的mixin名称,您应该可以这样做:
// 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()
,或者在后来的mixin中通过模式匹配访问单个.from()
mixin组,使其可以随意访问。
对于您的@keyframes
示例,这非常困难。事实上,a stack overflow answer对于帮助我解决应用@name
的问题至关重要,@keyframes
因为它遵循@name
定义而不适用于正常的LESS规则。应用}
的解决方案看起来很讨厌,但它确实有效。它确实有一个非常不幸的必要,即定义一个选择器字符串来播放动画(因为它使用该字符串来帮助构建关键帧的最后@
)。这种命名限制仅适用于以@keyframes
开头的css字符串,例如@media
,可能还有// 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, "");
}
。
此外,因为我们的模块文件中使用了标准的mixin名称,所以我们可以在新的mixin中一致地访问它,同时传入变量以选择正确的变体通过模式匹配混合。所以我们得到:
少于1.3.3或
.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, "");
}
LESS 1.4.0 +
.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);
你可以给它自己的名字,然后传递直接模式(所有没有点[。]和没有引号)模块上的模式匹配mixins,但不要忘记你还需要一个选择器字符串(引用它)来使mixin正常工作:
@-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;
}
{{1}}
答案 1 :(得分:1)
我只是简化了一点ScottS的方式,将 @keframes 与 -animation 区分开来:
.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;
}
/**/
但它应该不是问题 - &gt;我们所有人都推动CSS文件通过任何缩小评论的缩小器。
答案 2 :(得分:1)
您还可以使用我的解决方案生成CSS关键帧:https://github.com/thybzi/keyframes
功能强>
keyframes
规则中最多16个时间点(如果需要,可以轻松扩充该数量)animation
规则分开创建,因此:
animation
规则可以使用具有不同值的相同关键帧进行计时,重复等,animation
规则基本用法:
// 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);
}
答案 3 :(得分:0)
你真的不怎么使用mixins。
你应该采取以下措施:
.mixin-one { ... }
.mixin-two { ... }
.target-style {
.mixin-one;
.mixin-two;
font-family: 'Comic Sans MS';
color: magenta;
}