Question

我正在努力学习Sass - 有些人可以帮助我将以下内容转换为scss，我完全坚持如何嵌套这个？是否可以整理代码？我尝试了一些不起作用的组合，我也查看了文档无济于事

ul.related li, .sidebar p {
  border-bottom: 1px solid #999;
  color: #07A;
  font-size: 0.92em;
  margin-top: 0.4em;
  text-align: center;

}

ul.related li:last-child {
  border-bottom: none;
}


.sidebar p {
  border-bottom: none;
}



ul.related {
  width: 100%;
}

Answer 1

为了获得最佳实践，请将常用样式移除到占位符并进行扩展。

%commonstyle {
    border-bottom: 1px solid #999;
    color: #07A;
    font-size: 0.92em;
    margin-top: 0.4em;
    text-align: center;
}

ul.related {
    width: 100%;
    li {
        @extend %commonstyle;
        &:last-child {
            border-bottom: none;
        }
    }
}
.sidebar p {
    @extend %commonstyle;
    border-bottom: none;
}

scss嵌套坚持语法和嵌套

1 个答案: