#javascript #html #css #sass #css-selectors
#javascript #HTML #css #sass #css-селекторы
Вопрос:
В приведенном ниже коде Sass, как я могу переместить amp;:last-of-type код внутрь amp;-description , чтобы избежать необходимости повторять вложение.
Рабочий код: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;
amp;-info {
background-color: #444444;
amp;-description {
background-color: #666666;
font-size: 12px;
//Access :last-of-type here?
}
}
//The following works, but I want it moved into amp;-description
$ROW: amp;;
amp;:last-of-type {
#{$ROW}-info {
amp;-description {
background-color: blue;
}
}
}
}
Ответ №1:
Код SASS
.row {
border: 4px solid red;
color: white;
font-size: 20px;
amp;-info {
background-color: #444444;
amp;-description {
background-color: #666666;
font-size: 12px;
//Access :last-of-type here?
.row:last-of-type amp; {
background-color: blue;
}
}
}
}