大家好，我是鬼哥,对我而言平时使用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);
}
}
}
效果
文章版权声明
1 原创文章作者：汉墨堂-总部，如若转载，请注明出处： https://www.52hwl.com/32101.html
2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈
3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)
4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别
微信扫一扫 
支付宝扫一扫 