[英]SASS :last-of-type pseudo-class from within a nested selector
在下面的 Sass 代码中,如何在&-description
中移动&:last-of-type
代码以避免重复嵌套。
工作代码: https://jsfiddle.net/njc2txk1/
HTML 代码:
<ul class="list">
<li class="row">
<div class="row-info">
Info 1
<div class="row-info-description">
Description 1
</div>
</div>
</li>
<li class="row">
<div class="row-info">
Info 2
<div class="row-info-description">
Description 2
</div>
</div>
</li>
<li class="row">
<div class="row-info">
Info 3
<div class="row-info-description">
Description 3
</div>
</div>
</li>
</ul>
Sass 代码:
.row {
border: 4px solid red;
color: white;
font-size: 20px;
&-info {
background-color: #444444;
&-description {
background-color: #666666;
font-size: 12px;
//Access :last-of-type here?
}
}
//The following works, but I want it moved into &-description
$ROW: &;
&:last-of-type {
#{$ROW}-info {
&-description {
background-color: blue;
}
}
}
}
SASS代码
.row {
border: 4px solid red;
color: white;
font-size: 20px;
&-info {
background-color: #444444;
&-description {
background-color: #666666;
font-size: 12px;
//Access :last-of-type here?
.row:last-of-type & {
background-color: blue;
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.