Scss編程有點騷
作者：鬼哥
對我而言平時使用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語言循環(huán)判斷是否是每行的第六七個元素即可:(一行七天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);
}
}
}
效果
責任編輯：武曉燕
來源：
前端人
