css - 如何在CSS文件中添加if-else逻辑？

Question

我有以下.css.scss文件

.book-list li {
    display: inline-block;
    margin-bottom:5px;
    margin-left:5px;
    width:175px;
    color: #c4c5c7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    &:first-child {
        width: 535px;
        margin: 0 0 5px 5px;
        padding: 0 0 5px 5px;
        border-bottom: 1px dotted #6b6a6c;
    }
}

现在，我希望样式化一个非常相似的列表，称为 .todo-list。
唯一的区别是:

.todo-list li元素的宽度为125px，而不是175px。

.todo-list li元素不是具有first-child的特殊样式

我将以以下方式设置html的样式:

<ul class="book-list">
    <li>...
    </li>
    <li>...
    </li>
</ul>

要么

<ul class="todo-list">
    <li>...
    </li>
    <li>...
    </li>
</ul>

如何在不使用复制整个块的情况下实现上述 ？
(本质上，我正在寻找在css文件中添加if-else条件的方法。)

谢谢

Answer 1

您可以使用Mixins重新使用通用代码。

@mixin common-code {
  display: inline-block;
  margin-bottom:5px;
  margin-left:5px;
  color: #c4c5c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.book-list li {
    width:175px;
    @include common-code;
    &:first-child {
        width: 535px;
        margin: 0 0 5px 5px;
        padding: 0 0 5px 5px;
        border-bottom: 1px dotted #6b6a6c;
    }
}

.todo-list li {
    width:125px;
    @include common-code;
}

据我所知，SASS或纯CSS中没有If-Else子句。