CSS中的變量(Variables)被引入到CSS3中,它允許開發(fā)者在CSS聲明中重復(fù)使用同一值,從而避免了代碼的冗余。下面我們就來看一下CSS變量的用法。
首先,我們需要使用關(guān)鍵字“--”定義變量。如下所示:
:root { --color-blue: #3f51b5; --font-size: 16px; }上面代碼表示定義了兩個變量,一個是藍(lán)色字體的顏色值,另一個是字體大小。 在CSS聲明中使用變量也很簡單,只需要使用var()函數(shù)即可。如下所示:
p { font-size: var(--font-size); color: var(--color-blue); }上面代碼表示將字體大小和顏色值分別用變量代替,使代碼更容易維護(hù)。需要注意的是,使用變量時必須要加上“var()”函數(shù),否則代碼將不起作用。 另外,我們也可以繼承變量。如下所示:
:root { --color-blue: #3f51b5; } .content { color: var(--color-blue); } .header { background-color: var(--color-blue); color: #fff; }上面代碼表示“content”和“header”兩個類選擇器均繼承了“color-blue”的變量值。這樣使得代碼更具有可讀性和可維護(hù)性,并且可以同時修改多個元素的 CSS 樣式。 總結(jié):CSS變量是一種強大的工具,可以使代碼變得更加易讀和可維護(hù)。它可以用于在整個 CSS 中使用相同的值,并且可以提高代碼的復(fù)用性和可讀性。