成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css自定義屬性（css變量）

Null / 2884人閱讀

摘要：但不能包含，，，，等字符，普通字符局限在只要是數(shù)字字母下劃線和短橫線這些組合，但是可以是中文，日文或者韓文。

前言

剛開(kāi)始的“css變量”，經(jīng)擴(kuò)展之后，稱為“css自定義屬性”
當(dāng)各種預(yù)處理器滿天飛的時(shí)候，css變量已經(jīng)開(kāi)始漸漸普及
在特定的應(yīng)用場(chǎng)景，css變量確實(shí)發(fā)揮了很大的作用
下面開(kāi)始學(xué)習(xí)css變量

正文 一、變量的聲明和使用

CSS選擇器不能是數(shù)字開(kāi)頭，JS中的變量是不能直接數(shù)值的，但是，在CSS變量中，這些限制通通沒(méi)有。 但不能包含$，[，^，(，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文。

1. 聲明：大小寫敏感, --variable-name: variable-value;

:root{
    --color: red;
}

2. 使用：使用var(變量名)來(lái)使用一個(gè)變量

#div {
    color: var(color)
}

3. 變量組合使用
使用變量的時(shí)候，通常不會(huì)多帶帶使用，可以組合使用
當(dāng)變量的值是字符串時(shí)，可以直接拼接，如下

:root{
  --screen-category: "category"  //變量值是字符串
}
body:after {
  content: "--screen-category: "var(--screen-category);  // 直接拼接
}

當(dāng)變量的值是數(shù)值時(shí)，必須使用calc()函數(shù)計(jì)算，就算還是簡(jiǎn)單的單位拼接

.foo {
  --gap: 20;
  /* 無(wú)效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

4. 變量未定義和錯(cuò)誤定義
如果我們使用的變量沒(méi)有定義，則使用后面的值作為元素的屬性值, 如下所示
body里面訪問(wèn)不到.box定義的--1，因此使用#cd0000

.box {
  --1: #369; 
}
body {
  background-color: var(--1, #cd0000);
}

使用變量時(shí)，若變量已定義，但是變量的值不正確，則使用缺省值,如:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

結(jié)果body的顏色是transparent，因?yàn)閎ackground-color的缺省值就是transparent

二、繼承和作用域

1. 作用域
使用:root{}來(lái)定義全局css變量
想讓變量在局部可用，就定義在某個(gè)特定的選擇器下
還是下面這段代碼

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box這個(gè)作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

2. 繼承


   

   




.wrapper {
   --color: red;
}

.content1 {
   --color: yellow;
}

content1的--color為yellow
content2的--color沒(méi)有定義，繼承了wrapper的--color為red
--color: yellow只在content1的作用域內(nèi)有效

三、js操作css變量 
:root {
   --color: red;
}
//讀取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"

//改變
document.documentElement.style.setProperty("--color", "yellow");
var color = root.getPropertyValue("--color").trim();
console.log(color);  // "100px"

//刪除
document.documentElement.style.removeProperty("--color");
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"
四、與預(yù)處理器(sass,less)比較

1. css變量：

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

2. 預(yù)處理器：

預(yù)處理器的變量不是動(dòng)態(tài)的，在運(yùn)行時(shí)不可更改
預(yù)處理器的變量沒(méi)有作用域的說(shuō)法
不能與js交互
五、兼容

基本上能兼容大部分主流瀏覽器，直接使用沒(méi)有太大問(wèn)題
如果想使用但又想兼容所有瀏覽器，就是用下面的方法檢測(cè)瀏覽器是否支持CSS自定義屬性的方法

/*css*/
@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}

// Js
if (window.CSS && window.CSS.supports && window.CSS.supports("--a", 0)) {
    alert("CSS properties are supported");
} else {
    alert("CSS properties are NOT supported");
}
六、常用場(chǎng)景

為風(fēng)格統(tǒng)一而使用顏色變量

一致的組件屬性（布局，定位等）

避免代碼冗余(響應(yīng)式布局，制動(dòng)動(dòng)畫)

這里是常用場(chǎng)景的demo：https://github.com/shinyshine...

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

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

相關(guān)文章

  • CSS 自定義屬性 - 入門

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

    seanlook 評(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ù)性工...

    light 評(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 評(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)，葡萄城...

    番茄西紅柿 評(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 評(píng)論0 收藏0

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

0條評(píng)論

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