LESS和Mixins遇到麻烦

时间:2013-05-07 15:48:54

标签: css less mixins

根据我的理解,这是有效的LESS语法:

.some-mixin(@color)
{
   border-top:1px solid @color;
}

.some-element {
   .some-mixin (#FFFFFF);
}

并且会导致:

.some-element {
   border-top:1px solid #FFFFFF;
}

现在让我们说我们原来的CSS语法是这样的:

ul.sidebar li.categoryA { border-left: 15px solid #F3661F; }
ul.sidebar li.categoryA.active, 
ul.sidebar li.categoryA.active a { 
    background: #F3661F; 
    border-top:1px solid #F3661F; 
    border-bottom: 1px solid #F3661F; 
}
ul.sidebar li.categoryA:hover { 
    color:#AAA; border-left:229px solid #F3661F;  
}

让我们也考虑一下,在ul.sidebar li下有很多不同的“类别”(而不仅仅是A),所有颜色都不同。这就是我的想法:

/* MIXIN */

.category-item (@color)
{
    border-left: 15px solid @color;

    &.active, &.active a {
        background: @color;
        border-top: 1px solid @color;
        border-bottom: 1px solid @color;
    }

    &:hover {
        color: @color;
        border-left: 229px solid @color;
    }
}

/* RULES */

ul.sidebar li {
    .categoryA { .category-item(#F3661F); }
    .categoryB { .category-item(#FF0000); }
    .categoryC { .category-item(#00FF00); }

    /* Etc... */
}

然而:最后一个正在工作。

我做错了吗?我发明了另一个......不是吗?


P.S。刚刚找到this answer。猜猜我想要做的是仍然不受支持?嗯...

1 个答案:

答案 0 :(得分:3)

试试这个:

ul.sidebar li {
    &.categoryA { .category-item(#F3661F); }
    &.categoryB { .category-item(#FF0000); }
    &.categoryC { .category-item(#00FF00); }

  /*Etc.*/
}

这对我来说很好。输出是:

ul.sidebar li.categoryA {
  border-left: 15px solid #f3661f;
}
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
  background: #f3661f;
  border-top: 1px solid #f3661f;
  border-bottom: 1px solid #f3661f;
}
ul.sidebar li.categoryA:hover {
  color: #f3661f;
  border-left: 229px solid #f3661f;
}
...