Question

我有三个共享许多属性的CSS类：cell-empty，cell-record-left和cell-record-right。

这是我想要最终制作的CSS：

.cell-empty {
   background-color: red; //shared between all cells
   border: 1px solid black;
}

.cell-record-left {
    background-color: red; //shared between all cells
    text-indent: 15px; //shared between both .cell-record-left & .cell-record right
    border-right: 1px solid #DFE5ED;
}

.cell-record-right {
    background-color: red; //shared between all cells
    text-indent: 15px; //shared between both .cell-record-left & .cell-record right
    border-left: 1px solid #DFE5ED;
}

所以我想我会使用LESS来简化我的类，使用嵌套。这是我最初制作的：

.cell {
    background-color: red; 

    &-empty {
      border: 1px solid black;
    }

    &-record {
      text-indent: 15px;

      &-left {
        border-right: 1px solid #DFE5ED;
      }

      &-right {
        border-left: 1px solid #DFE5ED;
      }
   }
}

然而，这没有用，因为我假设嵌套会继承规则（显然，它没有）。所以我再次尝试，这次使用mixins，如下：

.cell {
    background-color: red; 

    &-empty {
      border: 1px solid black;
      .cell;
    }

    &-record {
      text-indent: 15px;

      &-left {
        border-right: 1px solid #DFE5ED;
        .cell;
        .cell-record;
      }

      &-right {
        border-left: 1px solid #DFE5ED;
        .cell;
        .cell-record;
      }
   }
}

然而，这似乎也不起作用。当我查看计算的CSS（使用此站点：http://less2css.org/）时，我收到的错误是我正在使用的mixin类未定义。

所以，我很困惑。我可以用LESS来简化我的CSS，以便我不会一遍又一遍地重写相同的样式？

我非常感谢任何帮助。谢谢！

Answer 1

我认为你在mixin解决方案中遇到的问题是你在mixin的定义中使用了mixin。

你需要在使用之前完成mixin的定义，如下所示：

LESS：

.cell {
  background:red;
}

.cell-empty {
  .cell
}

css输出将是：

.cell {
  background: red;
}
.cell-empty {
  background: red;
}

如何使用LESS在嵌套类之间共享样式规则？

1 个答案: