Scss编程有点骚

作者：鬼哥 2023-07-07 08:24:07开发 前端 对我而言平时使用scss基本就是编程用于css颜色变量(实在的，我开始只用浏览器自己的有点var了)，如果用scss变量来面对对象编程,编程确实用的挺少的。

大家好，有点我是编程鬼哥,对我而言平时使用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);    }  }}

效果

责任编辑：武晓燕 来源： 前端人 css颜色变量

(责任编辑：综合)