Question

我使用LESS CSS，我有以下情况。如果有进一步优化LESS代码的方法，你能建议我吗？

正如您所看到的，有许多对象在它们之间共享属性，但每个对象也有自己的特定自定义。

谢谢

footer a
{
  font-weight:bold;

    &#acme, 
    &#email_footer, 
    &#browser_ok, 
    &#browser_old
    {
      display:inline-block;
      position:relative;
      white-space:nowrap;
      background:url('footer_items.png') no-repeat;
      text-align:left;
      text-indent:-9999px;
      border:none;
    }

    &#acme
    {
      width:130px;
      height:25px;
      top:1px;
      background-position:-90px 0;

        &:hover
        {
          background-position:-90px -25px;
        }

        &:active
        {
          top:0px;
        }
    }

    &#email_footer,
    &#browser_ok,
    &#browser_old
    {
      width:38px;
      height:31px;
      top:-3px;
    }


    &#email_footer
    {
      background-position:-230px 0;

        &:hover
        {
          background-position:-230px -31px;
        }

        &:active
        {
          top:-2px;
        }
    }

    &#browser_ok,
    &#browser_old
    {
      background-position:0 -2px;

        &:active
        {
          top:-2px;
        }
    }

    &#browser_ok
    {
      background-position:0 -2px;

        &:hover
        {
          background-position:0 -35px;
        }
    }

    &#browser_old
    {
      background-position:-45px -2px;

        &:hover
        {
          background-position:-45px -35px;
        }
    }
}

Answer 1

看起来你仍然可以将一些东西组合在一起。特别是您的一些:active代码和一些background-position信息。为了在:active之后保留新合并的:hover，我将包含它的定义移到了额外的定义之下，这对您的代码无关紧要。总之，它减少了7行代码。

footer a
{
  font-weight:bold;

    &#acme, 
    &#email_footer, 
    &#browser_ok, 
    &#browser_old
    {
      display:inline-block;
      position:relative;
      white-space:nowrap;
      background:url('footer_items.png') no-repeat;
      text-align:left;
      text-indent:-9999px;
      border:none;
    }

    &#acme
    {
      width:130px;
      height:25px;
      top:1px;
      background-position:-90px 0;

        &:hover
        {
          background-position:-90px -25px;
        }

        &:active
        {
          top:0px;
        }
    }

    &#email_footer
    {
      background-position:-230px 0;

        &:hover
        {
          background-position:-230px -31px;
        }

    }

    &#browser_ok,
    &#browser_old
    {
      background-position:0 -2px;   
    }

    &#browser_ok
    {   
        &:hover
        {
          background-position:0 -35px;
        }
    }

    &#browser_old
    {
      background-position:-45px -2px;

        &:hover
        {
          background-position:-45px -35px;
        }
    }

    &#email_footer,
    &#browser_ok,
    &#browser_old
    {
      width:38px;
      height:31px;
      top:-3px;

        &:active
        {
          top:-2px;
        }
    }
}

LESS：如何使用多个选择器优化代码编写

1 个答案: