css定義變量

2023-04-29 02:37:02

仁義忠信,樂善不倦,此天爵也。一一《孟子》

寫法如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			:root {
				/* 定義變量，需要--開頭 */
				--ruben-width: 200px;
				--ruben-height: 200px; 
				--ruben-bg-color: #ff0000;
			}

			.ruben {
				/* 使用變量，需要var(變量名) */
				background-color: var(--ruben-bg-color);
				width: var(--ruben-width);
				height: var(--ruben-height);
			}

			.ruben1 {
				background-color: var(--ruben-bg-color);
				width: var(--ruben-width);
				height: var(--ruben-height);
			}
		</style>
	</head>
	<body>
		<div class="ruben"></div>
		<hr/>
		<div class="ruben1"></div>
	</body>
</html>

複制

效果如下：