想請問 &-- 在 SCSS 中代表什麼意思呢？

scss 架構 css sass

kimberlyl 2022-09-20 17:57:38 ‧ 1270 瀏覽

分享至

像下面這個範例，
不太明白兩個「--」的作用是什麼，
找了很久大多都只解釋「&」，
真的麻煩各位大大幫忙解惑，
感謝感謝

.scroll{
	&--none {
		&::-webkit-scrollbar {
				display: none;
			}
	}
	&--style{
		&::-webkit-scrollbar {
			// display: none;
			width: 0;
			height: 0;
		}
		&:hover {
			&::-webkit-scrollbar{
				height: .5rem;
			}
			&::-webkit-scrollbar-track {
				background: tint-color($primary, 40%);
			}
			&::-webkit-scrollbar-thumb {
				border-radius: .25rem;
				background: $primary;
				&:hover {
					background: shade-color($primary, 40%);
				}
			}
		}
	}
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Time

iT邦新手 4 級 ‧ 2022-09-20 20:35:44

最佳解答

你貼的寫法只是把 class 名稱組起來，scroll + --none，結果如下
根據 BeautifyTools 編譯的結果：

.scroll--none::-webkit-scrollbar {
	display: none;
}

補充
在 css 裡 -- 是用來指 variable，不知道你是不是要用這個

<div style="--display: none" >display none</div>
<div style="--display: block" >display block</div>
<style>
div {
    display: var(--display);
}
</style>