原生css變量聲明

Imfan 發(fā)布于2019-08-29 15:13 / 2890人閱讀

摘要：原生變量聲明噫我為什么要用原生這個(gè)名詞啊，管他呢。我發(fā)現(xiàn)了一個(gè)不得了的東西，接觸前端都有一年多的時(shí)間了，今天才知道原生也可以變量聲明這個(gè)黑科技啊。

原生css變量聲明

噫~~~
我為什么要用原生css這個(gè)名詞啊，管他呢。
我發(fā)現(xiàn)了一個(gè)不得了的東西，接觸前端都有一年多的時(shí)間了，今天才知道原生css也可以變量聲明這個(gè)黑科技啊。
我是不是和時(shí)代脫軌太長時(shí)間了。
好了，來吧，介紹一下這個(gè)東東。
統(tǒng)計(jì)一下，知道這個(gè)東西的同學(xué)請?jiān)谙路皆u論打1

定義css變量

我們都知道使用less或者sass這些預(yù)處理語言，可以做到變量聲明，下面舉個(gè)例子，聲明一個(gè)顏色是白色的變量,變量名是mio

less

@mio : #fff;
div{
    color : @mio;
}

sass

$mio : #fff;
div{
    color : $mio;
}

css

*{
    --mio : #fff;
}
div{
    color : var(--mio);
}

注意css的寫法，聲明變量必須寫在選擇器里面，變量名用--定義。

用處

結(jié)合變量聲明這個(gè)功能，可以做到定義全局的公共樣式，比如主題色，比如官方板塊間距，比如移動(dòng)端適配不同屏幕頁面的排版方式之類的。
我們再結(jié)合css3提供的cacl()計(jì)算屬性，這個(gè)屬性支持四則運(yùn)算，支持的單位有rem,em,%,px,使用時(shí)在運(yùn)算符號兩邊加空格。
舉個(gè)例子：

:root{
    --cellwidth:200px;
    --cellheight: calc(var(--cellwidth) / 4);
}
div{
    width: var(--cellwidth);
    height: var(--cellheight);
    line-height: var(--cellheight);
    margin-top: calc(var(--cellwidth) - var(--cellheight) + 2px);
}

這段代碼計(jì)算的div，寬200px，高50px，行高50px，margin-top是52px
運(yùn)行后的結(jié)果：

媽耶，太厲害了，css越來越厲害了

GPU云服務(wù)器云服務(wù)器聲明變量 python變量聲明 Ruby變量聲明 asp變量聲明

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113179.html

相關(guān)文章

原生css 中變量的使用

摘要：函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。注意，變量值只能用作屬性值，不能用作屬性名。如果變量值是數(shù)值，不能與數(shù)值單位直接連用。六兼容性處理對于不支持變量的瀏覽器，可以采用下面的寫法。那些對無用的信息，也可以放入變量。前兩天看到阮大神的一篇在css中使用變量的文章，整理了一下。這個(gè)重要的 CSS 新功能，所有主要瀏覽器已經(jīng)都支持了。本文全面介紹如何使用它，你會(huì)發(fā)現(xiàn)原生 CSS 從此變得異...

番茄西紅柿 2019-04-23 13:10 評論0 收藏0
CSS Variables

摘要：七與預(yù)處理器的不同七與預(yù)處理器的不同預(yù)處理器變量不是實(shí)時(shí)的編譯結(jié)果預(yù)處理器不能限定作用域編譯為預(yù)處理器變量不可互操作原生的自定義屬性可以與任何預(yù)處理器或純文件一起使用。CSS原生變量(CSS自定義屬性) 示例地址：https://github.com/ccyinghua/Css-Variables 一、css原生變量的基礎(chǔ)用法變量聲明使用兩根連詞線--表示變量，$color是屬于Sass的...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0
CSS 自定義屬性 - 入門

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

seanlook 2019-08-30 15:44 評論0 收藏0
CSS Variable Study

摘要：在像這種聲明式語言中，隨著時(shí)間而改變的值并不存在，也就沒有所謂變量的概念了。引入了一種層級變量的概念，從而能夠從容應(yīng)對可維護(hù)性的挑戰(zhàn)?？梢员皇褂迷谌我獾牡胤健? CSS變量能幫助我們干什么在一些命令式編程語言中，像Java、C++亦或是JavaScript，通過變量我們能夠跟蹤某些狀態(tài)。變量是一種符號，關(guān)聯(lián)著一個(gè)特定的值，變量的值能隨著時(shí)間的推移而改變。在像CSS這種聲明式語言中，隨著...

hersion 2019-08-29 16:09 評論0 收藏0
在原生CSS中使用變量

摘要：而現(xiàn)在，我們可以在原生中使用變量了先來兩個(gè)在線感受一下定義變量，也稱為自定義屬性。但是局部變量只能夠在被申明的元素及其子元素中使用。在中使用變量變量是的一部分，這意味著我們可以通過來訪問修改變量的值，這是等預(yù)處理器所做不到的。本文首發(fā)于我的博客一直以來，CSS作為一種申明式的樣式標(biāo)記語言，很難像如javascript等命令式編程語言一樣通過定義和使用變量的方式來維護(hù)和追蹤某些狀態(tài)。...

FreeZinG 2019-08-30 14:03 評論0 收藏0