CSS 程式札記 : 變量(Variables)

閱讀時間約 1 分鐘

在 CSS 的開發過程中,重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性,就需要用到 CSS 變量了,CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法,以及它對撰寫 CSS 的影響。

什麼是 CSS 變量?

CSS 變量可以將一個值儲存在一個自定義的屬性中,然後在整個樣式表中重複使用該值。這意味著你可以在一個地方定義一個值,並在多個地方引用它,從而使你的 CSS 更加整潔和可維護。

CSS 變量基本語法

在 CSS 中,變量以 -- 開頭,後面跟著變量名。你可以在任何選擇器中定義變量,但通常它們被定義在 :root 偽類中,這樣就可以在全局範圍內使用。

:root {
--main-color: #4CAF50;
--font-size: 16px;
}

body {
color: var(--main-color);
font-size: var(--font-size);
}

在這個範例中,我們在 :root 偽類中定義了兩個變量 --main-color--font-size,並在 body 選擇器中使用它們。這樣,如果我們想要更改主要顏色或字體大小,只需要在 :root 中修改變量的值即可。

為什麼使用 CSS 變量?

CSS 變量提供了許多優勢,使得它們成為現代網頁設計的重要工具:

  1. 維護性:當你需要修改一個在多個地方使用的值時,你只需要在一個地方更新該值,而不是在每個地方手動更改。
  2. 可讀性:變量名可以提供關於它們用途的提示,使你的代碼更容易理解。
  3. 靈活性:你可以根據不同的條件輕鬆更改變量的值,例如在不同的媒體查詢。

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 [email protected]
留言0
查看全部
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
本文將介紹 CSS 中的兩個重要概念:偽類與偽元素。通過理解和運用這些概念,你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一,本文將介紹如何使用 CSS 來設定網頁背景,讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性,position是用於控制網頁元素在頁面上的排列,接下來將逐一介紹position屬性的五種不同值:static, relative, absolute, fixed, 和 sticky,以及它們如何影響元素的排列。
本文將介紹 CSS 中的兩個重要概念:偽類與偽元素。通過理解和運用這些概念,你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一,本文將介紹如何使用 CSS 來設定網頁背景,讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性,position是用於控制網頁元素在頁面上的排列,接下來將逐一介紹position屬性的五種不同值:static, relative, absolute, fixed, 和 sticky,以及它們如何影響元素的排列。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
這篇記錄 Sass/SCSS 編譯與語法
Thumbnail
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
Thumbnail
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
Thumbnail
自學程式的過程中,你總是把transform、transition,甚至是translate搞混嗎!為了分辨「轉變」的三個關係字,並理解到底什麼時候要用哪個屬性才正確,這篇筆記誕生了!
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
這是一篇關於 CSS 動畫屬性的學習筆記,如果你剛好也在學習的話,歡迎進來看看!
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
這篇記錄 Sass/SCSS 編譯與語法
Thumbnail
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
Thumbnail
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
Thumbnail
自學程式的過程中,你總是把transform、transition,甚至是translate搞混嗎!為了分辨「轉變」的三個關係字,並理解到底什麼時候要用哪個屬性才正確,這篇筆記誕生了!
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
這是一篇關於 CSS 動畫屬性的學習筆記,如果你剛好也在學習的話,歡迎進來看看!
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。