Javascript SASS:嵌套选择器中的最后一个伪类类型
在下面的Sass代码中,如何在Javascript SASS:嵌套选择器中的最后一个伪类类型,javascript,html,css,sass,css-selectors,Javascript,Html,Css,Sass,Css Selectors,在下面的Sass代码中,如何在&-description中移动&:last类型的&:code>以避免重复嵌套 工作代码: HTML代码: <ul class="list"> <li class="row"> <div class="row-info"> Info 1 <div class="row-info-des
&-description
中移动&:last类型的&:code>以避免重复嵌套
工作代码:
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>
.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;
}
}
}
}