国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

簡(jiǎn)單介紹 CSS Variables

tylin / 2636人閱讀

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

如果我們用過(guò)動(dòng)態(tài)樣式語(yǔ)言（像 Less、 Sass ）的話，肯定對(duì)其中可以定義變量的特性非常喜歡，特別是隨著樣式文件越來(lái)越復(fù)雜的時(shí)候，把一些值抽成變量會(huì)使代碼更好維護(hù)。現(xiàn)在隨著 CSS 的發(fā)展，目前 CSS Variables 也引入了自己的變量，本文就對(duì) CSS Variables 進(jìn)行簡(jiǎn)單的介紹。

如何定義和使用 CSS Variables

按照 CSS Variables 規(guī)范，我們通過(guò) --* 的方式來(lái)創(chuàng)建一個(gè)CSS變量，并通過(guò) var(--foo) 的方式來(lái)引用一個(gè)變量（大小寫(xiě)敏感哦）。例如：

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

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

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

瀏覽器兼容性

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

還有一些你該知道的

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

變量也是可用嵌套的：

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115104.html

相關(guān)文章

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

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

    honhon 評(píng)論0 收藏0

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

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

    CloudDeveloper 評(píng)論0 收藏0

  • CSS Variables學(xué)習(xí)筆記

    摘要：注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來(lái)設(shè)置變量名，并使用特定的來(lái)訪問(wèn)。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫的變量。 注：本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。 ...

    mudiyouyou 評(píng)論0 收藏0

  • bootstrap4.0 css架構(gòu)

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

    solocoder 評(píng)論0 收藏0

  • 2017年最新基于hexo搭建個(gè)人免費(fèi)博客——自定義頁(yè)面樣式一

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

    curried 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<