大家好，我是鬼哥,对我而言平时使用scss基本就是用于css颜色变量(实在的，我开始只用浏览器自己的var了)，如果用scss变量来面对对象编程,确实用的挺少的。
今天遇到一个小需求：<日历看板>，然后标注出星期六和星期日凸显，需求如下:
日历需求
组件文件:/index.vue
<div
v-for="(item) in dateList"
:key="item"
:class="{'disble': item.isDisble}"
class="date">
{{ item.day }}
</div>如果是你，你会如何用最简单的代码实现这个需求呢?
我想到的是使用scss语言循环判断是否是每行的第六七个元素即可:(一行七天i%7)
scss文件:/index.scss
// 6*7 格子
@for $i from 1 through 42 {
@if $i % 7 == 0 {
.date:nth-child(#{$i}) {
color: var(--red);
}
.date:nth-child(#{$i - 1}) {
color: var(--red);
}
}
}
效果
