<ul class="news-list-01">
<li><a class="news-list-01__item" href="#"><span class="news-list-01__item-date">2021.01.01</span><span class="news-list-01__item-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li><a class="news-list-01__item" href="#"><span class="news-list-01__item-date">2021.01.02</span><span class="news-list-01__item-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li><a class="news-list-01__item" href="#"><span class="news-list-01__item-date">2021.01.03</span><span class="news-list-01__item-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
</ul>
ul.news-list-01
each item in items
li
a.news-list-01__item(href=item.link)
span.news-list-01__item-date #{ item.date }
span.news-list-01__item-text #{ item.text }
{
"items": [
{
"link": "#",
"date": "2021.01.01",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.02",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.03",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.news-list-01';
// 変数
$color_primary: #000;
$transition_default: 0.2s;
#{ $BLOCK_NAME } {
font-size: 13px;
&__item {
display: block;
padding: 4px 0;
color: $color_primary;
transition: opacity $transition_default ease-out;
&:hover {
opacity: 0.55;
}
@include Mq(md) {
display: flex;
align-items: center;
padding: 5px 0;
}
}
&__item-date {
position: relative;
display: block;
flex-shrink: 0;
width: 115px;
padding-left: 15px;
font-size: 15px;
font-weight: bold;
line-height: 30px;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 4px;
height: 4px;
margin: auto;
content: '';
background: $color_primary;
border-radius: 50%;
}
@include Mq(md) {
padding: 0 25px 0 0;
&::before {
right: 0;
left: auto;
width: 6px;
height: 6px;
}
}
}
&__item-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include Mq(md) {
padding-left: 25px;
}
}
}