簡單介紹 CSS Variables

tylin 發布于2019-08-30 12:50 / 2627人閱讀

摘要：例如變量同樣是可嵌套使用的，用來定義全局變量瀏覽器兼容性我在寫這篇文章的時候，這個特性依然處于實驗階段，所以，目前來說，只有以及支持了這個特性。變量也是可用嵌套的變量還可以更另一個特性方法一起使用本文來自我的博客

如果我們用過動態樣式語言（像 Less、 Sass ）的話，肯定對其中可以定義變量的特性非常喜歡，特別是隨著樣式文件越來越復雜的時候，把一些值抽成變量會使代碼更好維護。現在隨著 CSS 的發展，目前 CSS Variables 也引入了自己的變量，本文就對 CSS Variables 進行簡單的介紹。

如何定義和使用 CSS Variables

按照 CSS Variables 規范，我們通過 --* 的方式來創建一個CSS變量，并通過 var(--foo) 的方式來引用一個變量（大小寫敏感哦）。例如：

:root {
    --brand-primary: #338800;
}

body {
    background-color: var(--brand-primary);
}

CSS變量同樣是可嵌套使用的，:root用來定義全局變量

瀏覽器兼容性

我在寫這篇文章的時候，這個特性依然處于實驗階段，所以，目前來說，只有 FireFox 34+ 、 Chrome 49+ 以及 Safari 9.1+ 支持了這個特性。另外， Chrome 48 其實也支持了這個特性，用戶需要在瀏覽器地址欄輸入 chrome://flag/ 找到“Enable experimental Web Platform”選項開啟才行。

還有一些你該知道的

var() 還可以接受第二個參數（ color: var(--header-color, blue); ），表示備選參數，第一個參數獲取失敗的時候，它就生效了。

變量也是可用嵌套的：

--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);

變量還可以更另一個CSS特性——calc()方法一起使用：

--container-width: 1000px;
max-width: calc(var(--container-width) / 2);

本文來自我的博客：http://blog.mcbird.cn/2016/03/09/css-variables/

云服務器 GPU云服務器 css介紹 css簡單簡單css WebRtc的簡單介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115104.html

Javascript如何與Sass,Less,Css之間共享變量？

摘要：環境和及其等先安裝，下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量，然后使用。文件有一個關鍵字，它在功能上等同于的關鍵字，即導出一個對象。原博文地址，此博文首次發于csdn，原創前段時間遇到網站換膚的需求，本想挺簡單的，直接用 Sass 或者 Less 設置變量就好了，結果導致的問題就是 js 中設置的樣式得單獨設置，好麻煩。本文章代碼gitHub地址 ...

honhon 2019-08-23 16:49 評論0 收藏0
Javascript如何與Sass,Less,Css之間共享變量？

摘要：環境和及其等先安裝，下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量，然后使用。文件有一個關鍵字，它在功能上等同于的關鍵字，即導出一個對象。原博文地址，此博文首次發于csdn，原創前段時間遇到網站換膚的需求，本想挺簡單的，直接用 Sass 或者 Less 設置變量就好了，結果導致的問題就是 js 中設置的樣式得單獨設置，好麻煩。本文章代碼gitHub地址 ...

CloudDeveloper 2019-08-29 18:33 評論0 收藏0
CSS Variables學習筆記

摘要：注本文首發于個人博客學習筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學習筆記。使用自定義屬性來設置變量名，并使用特定的來訪問。二學習筆記聲明調用聲明方式變量聲明的方式非常簡單，如下，聲明了一個名叫的變量。注：本文首發于個人博客《CSS Variables學習筆記》。最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學習筆記。 ...

mudiyouyou 2019-08-29 15:11 評論0 收藏0
bootstrap4.0 css架構

摘要：原子性的默認變量一般是用來設置默認值，然后根據需求來覆蓋的。語義化的變量名，值為直接的屬性值。組件文件互不引用。組合有幾個入口文件對組件進行按順序的引入，形成不同的專用，形成完整可用的樣式，注意引用順序。原子性 sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的。覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可存放變量的文件。語義化的變量名，值為直接的屬性值。 ...

solocoder 2019-08-30 15:53 評論0 收藏0
2017年最新基于hexo搭建個人免費博客——自定義頁面樣式一

摘要：添加你修改的代碼找到你主題文件夾里的對應位置以我的路徑為例子里面有個文件夾和一個文件，主要用于打包代碼輸出成樣式的文件分析下其源代碼。注意本人不提倡去修改除了下的其他個文件里的源代碼，可能后面出問題不好還原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言之前答應一個評論朋...

curried 2019-08-29 12:16 評論0 收藏0