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元素的宽度为125像素而不是175像素。
.todo-list li元素 NOT 具有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子句。

Answer 2

您可以使用CSS 属性选择器和$=运算符（表示'以'结尾'）来实现此目的：

[class$="list"] li {
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:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}

.book-list li {
width:175px;
}

.todo-list li {
width: 125px
}

Answer 3

我不相信有一种方法可以添加逻辑css文件。您可以使用javascript来完成它，但是可以使用纯css解决方案。

.book-list li, .todo-list li {
    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;
    &:first-child {
        width: 535px;
        margin: 0 0 5px 5px;
        padding: 0 0 5px 5px;
        border-bottom: 1px dotted #6b6a6c;
    }
}

.todo-list li {
    width: 125px;
}

注意：在css中，给元素的最后一个属性将是使用的属性。这意味着您可以设置样式.todo-list li来覆盖之前的宽度分配和＆amp;：第一个孩子，如果您希望这样做。

Answer 4

您可以在Sass中使用继承，如：

.list {
    display: inline-block;
    margin-bottom:5px;
    margin-left:5px;

    color: #c4c5c7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.book-list {
    @extend .list

    li {
        width: 125px;

        &:first-child {
            width: 535px;
            margin: 0 0 5px 5px;
            padding: 0 0 5px 5px;
            border-bottom: 1px dotted #6b6a6c;
        }
    }
}

.todo-list {
    @extend .list;

    li {
        width: 175px;
    }
}

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

4 个答案: