原生css變量聲明

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

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

原生css變量聲明

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

定義css變量

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

less

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

sass

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

css

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

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

用處

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

: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);
}

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

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

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

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

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

相關(guān)文章

原生css 中變量的使用

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

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

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

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

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

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

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

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

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

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