CSS-自定義變量

番茄西紅柿發(fā)布于2019-04-23 13:41 / 1051人閱讀

摘要：變量的值可以是顏色字符串多個(gè)值的組合等為什么選擇兩根連詞線表示變量為什么選擇兩根連詞線表示變量被用掉了，被用掉了。

使用背景：

一些常見(jiàn)的例子：

為風(fēng)格統(tǒng)一而使用顏色變量
一致的組件屬性（布局，定位等）
避免代碼冗余

*更方便的從CSS向JS傳遞數(shù)據(jù)（例如媒體斷點(diǎn)）

為什么使用：

以下幾點(diǎn)是未來(lái)CSS屬性的簡(jiǎn)短說(shuō)明：

動(dòng)態(tài)性，可以在運(yùn)行時(shí)更改
可以方便的從JS中讀/寫
可繼承，可組合，同時(shí)具有作用域

定義：

定義
用這樣的方式來(lái)聲明一個(gè)變量：--variable-name: variable-value;（變量名是大小寫敏感的）。變量的值可以是顏色、字符串、多個(gè)值的組合等:

:root{
    --base_color:#398bd0;
    --bg_color:#4a4a4a;
}

為什么選擇兩根連詞線（--）表示變量？

為什么選擇兩根連詞線（--）表示變量？
$foo被 Sass 用掉了，
@foo被 Less 用掉了。
為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線了

用法：

.res_nav ul li:hover a{color:var(--base_color);}

.res_contact_btn a:hover{background:var(--base_color);}

作用域：

使用:root 作用域來(lái)定義全局變量：

:root{ --global-var: global; }

如果想讓某個(gè)變量只在部分元素/組件下可見(jiàn)，只需要在特定的元素下定義該變量：

 
My block is 
    awesome 


/*css文件*/
.block { --block-font-size: 1rem; font-size: var(--block-font-size); } 
.block__highlight { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

媒體查詢也可以提供作用域：

@media screen and (min-width: 1025px) { 
    :root { 
        --screen-category: desktop;
     } 
}

下面一個(gè)例子來(lái)展示偽類下的作用域（例如，:hover）：

云服務(wù)器 GPU云服務(wù)器自定義css 變量變量定義 css自適應(yīng) 自定義

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2218.html

相關(guān)文章

CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)循環(huán)和數(shù)學(xué)操作等中使用。不同之處在于變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)屬性，而預(yù)處理器變量會(huì)被編譯成普通的代碼。變量提供了更多可能性但這并不是說(shuō)你需要在二者之間選擇其一你可以同時(shí)使用變量和預(yù)處理器變量的強(qiáng)大功能。 CSS預(yù)處理器，如Sass和Less，使得CSS代碼易于組織和維護(hù)。通過(guò)提供變量、混合、循環(huán)等特性，使得CSS具有動(dòng)態(tài)編寫的能力，從而減少重復(fù)性工...

light 2019-08-02 16:14 評(píng)論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)循環(huán)和數(shù)學(xué)操作等中使用。不同之處在于變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)屬性，而預(yù)處理器變量會(huì)被編譯成普通的代碼。變量提供了更多可能性但這并不是說(shuō)你需要在二者之間選擇其一你可以同時(shí)使用變量和預(yù)處理器變量的強(qiáng)大功能。 CSS預(yù)處理器，如Sass和Less，使得CSS代碼易于組織和維護(hù)。通過(guò)提供變量、混合、循環(huán)等特性，使得CSS具有動(dòng)態(tài)編寫的能力，從而減少重復(fù)性工...

yankeys 2019-08-29 18:43 評(píng)論0 收藏0
CSS變量（自定義屬性）實(shí)踐指南

摘要：和這樣的預(yù)處理器，讓我們的代碼保持良好的結(jié)構(gòu)和可維護(hù)性。這是否意味著變量已經(jīng)無(wú)關(guān)緊要了呢那可未必，主要是因?yàn)?，變量與預(yù)處理器中的變量其實(shí)是不同的東西。而你是無(wú)法對(duì)預(yù)處理器中的變量做上面這些操作的。本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城...

番茄西紅柿 2019-04-23 13:26 評(píng)論0 收藏0
CSS變量（自定義屬性）實(shí)踐指南

摘要：變量，或者用它的官方稱謂，叫作自定義屬性，已經(jīng)可用，并且有非常棒的瀏覽器支持，而也正在取得進(jìn)展。這是否意味著變量已經(jīng)無(wú)關(guān)緊要了呢那可未必，主要是因?yàn)?，變量與預(yù)處理器中的變量其實(shí)是不同的東西。轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。 Sass和Less這樣的預(yù)處理器，讓我們的CSS代碼保持良好的結(jié)構(gòu)和可維護(hù)性。像變量、混合(mixin...

source 2019-08-29 16:33 評(píng)論0 收藏0
CSS 自定義屬性 - 入門

摘要：變量的函數(shù)引用的自定義屬性被稱為變量。為此，可讀性和可維護(hù)性是自定義屬性最大的優(yōu)勢(shì)。自定義屬性作用域在中，變量有作用域一說(shuō)。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。引言 ??CSS語(yǔ)言是一種聲明式語(yǔ)言，不像其他語(yǔ)言有變量、條件和邏輯等特性，因?yàn)檫@個(gè)原因，社區(qū)中有了各種CSS處理器語(yǔ)言，比如Sass、LESS和Stylus等。這些處理器語(yǔ)言引入了一...

seanlook 2019-08-30 15:44 評(píng)論0 收藏0