摘要:但由于預處理器不在瀏覽器中運行并且無法看到標記,它們不能這樣做。跨不同的工具集或上托管的第三方樣式表共享預處理器變量是不可能或至少不容易的。原生的自定義屬性可以與任何預處理器或純文件一起使用。
使用語法
首先我們先來看一個例子:
html代碼:
這是一段文字
css代碼:
.element { width:200px; height:200px; --main-bg-color: #000; color:#fff; background-color: var(--main-bg-color); }
實現效果:
結果是該DOM元素背景變成了黑色。
CSS中原生的變量定義語法是:--*,變量使用語法是:var(--*),其中*表示我們的變量名稱。關于命名這個東西,各種語言都有些顯示,例如CSS選擇器不能是數字開頭,JS中的變量是不能直接數值的,但是,在CSS變量中,這些限制通通沒有,例如:
:root{ --main-bg-color: #000; } .element { background-color: var(--main-bg-color); }
注意:變量名稱不能包含$,[,^,(,%等字符,普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合,但是可以是中文,日文或者韓文,例如:
.element { width:200px; height:200px; --黑色: #000; color:#fff; background-color: var(--黑色); }
css變量完整語法:
CSS變量使用的完整語法為:var( [, ]? ),用中文表示就是:var( <自定義屬性名> [, <默認值 ]? ),也即是如果我們沒有定義變量名稱,那么就會使用后面的值作為其默認屬性值。
如下:
.element { background-color: var(--new-bg-color,#EE0000); }
得到的結果當然是后面顏色的值的背景。
我們來看一下如果變量名稱不合法會出現什么結果,看下面例子:
body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000); }
請問,此時
的背景色是?A. transparent
B. 20px
C. #369
D. #cd0000
答案是:A. transparent
CSS變量中,果發現變量值是不合法的,例如上面背景色顯然不能是20px,則使用背景色的缺省值,也就是默認值代替,于是,上面CSS等同于:
body { --color: 20px; background-color: #369; background-color: transparent; }css變量在js中的應用
看如下例子,html代碼:
這是一段文字
css代碼:
#jsDom { --my-varwidth: 200px; background-color: #000; color:#fff; width:var(--my-varwidth); height:200px; }
js代碼:
var element = document.getElementById("jsDom"); var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth"); console.log(curWidth); //200px //設置過后該DOM元素的寬度變為了300px element.style.setProperty("--my-varwidth", "300px");
如果樣式是寫到行間呢?那么進行如下操作:
html代碼:
這是一段文字
js代碼:
var element = document.getElementById("jsDom"); var curWidth = element.style.getPropertyValue("--my-varwidth"); console.log(curWidth); //400px瀏覽器兼容
瀏覽器的兼容如圖所示:
到目前位置IE11也不支持該css變量。
說到這兒感覺這個css變量也是很強大的,那么它跟預處理器比較,你覺得哪個更好?下面講一下預處理器的劣勢。
預處理器劣勢 預處理器變量不是實時的也許令新手驚訝的是,預處理器局限性最常見的情況是Sass無法在媒體查詢中定義變量或使用@extend。
$gutter: 1em; @media (min-width: 30em) { $gutter: 2em; } .Container { padding: $gutter; }
上面代碼將編譯為:
.Container { padding: 1em; }
上面結果可以看出來,媒體查詢塊被丟棄,變量賦值被忽略。
由于無法在匹配@media規則的基礎上改變變量,所以唯一的選擇是為每個媒體查詢分配一個唯一的變量,并多帶帶編寫每個變體。
預處理器變量不能級聯每當使用變量,作用域的問題就不可避免的出現。這個變量應該設置為全局變量嗎?是否應該限定其范圍為文件或模塊?是否應該限制在塊中?
由于CSS最終目的是為HTML添加樣式,事實證明還有另一種有效的方法給變量限定作用域:DOM元素。但由于預處理器不在瀏覽器中運行并且無法看到標記,它們不能這樣做。
假設有一個網站,面對偏好較大文字的用戶,就向元素添加類user-setting-large-text。當設置了這個類時,應當應用較大的$font-size變量賦值:
$font-size: 1em; .user-setting-large-text { $font-size: 1.5em; } body { font-size: $font-size; }
但同樣,就像上面的媒體塊示例,Sass完全忽略了該變量的賦值,這意味著這是不可能發生的。編譯后的代碼如下:
body { font-size: 1em; }預處理器變量不繼承
雖然繼承嚴格說來是級聯的一部分,之所以把它多帶帶分出來講,是因為多次想調用這個特性卻不得。
假設一種情況,要在DOM元素上基于其父元素應用的顏色而設置樣式:
.alert { background-color: lightyellow; } .alert.info { background-color: lightblue; } .alert.error { background-color: orangered; } .alert button { border-color: darken(background-color, 25%); }
上面的代碼并不是有效的Sass(或CSS),但你應該明白它想達到什么目的。
最后一句聲明試圖在
顯然這在Sass中行不通,因為預處理器不知道DOM結構,但希望你清楚的認識到為什么這類東西是有用的。
調用一個特定的用例:出于可訪問性的原因,在繼承了DOM屬性上運行顏色函數是極其方便的。例如,確保文本始終可讀,并充分與背景顏色形成鮮明對比。 有了自定義屬性和新的CSS顏色函數,很快這將成為可能。
預處理器變量不可互操作這是預處理器相對明顯的一個缺點,提到它是因為我覺得它重要。如果你正使用PostCSS來構建網站,想使用只能通過Sass實現主題化的第三方組件,那你真是不走運了。
跨不同的工具集或CDN上托管的第三方樣式表共享預處理器變量是不可能(或至少不容易)的。
原生的CSS自定義屬性可以與任何CSS預處理器或純CSS文件一起使用。反之則不然。
下面給一個css變量在媒體查詢中的使用:
:root { --gutter: 1.5em; } @media (min-width: 30em) { :root { --gutter: 2em; } } @media (min-width: 48em) { :root { --gutter: 3em; } }
如果是預處理器這樣寫就無效了。
參考Using CSS custom properties (variables)
小tips:了解CSS/CSS3原生變量var
我為什么對原生CSS變量感到興奮
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115575.html
摘要:與屬性的值不同,其不為被隱藏的對象保留其物理空間指定對象為內聯元素。指定對象作為塊元素級的表格。類同于標簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更,僅供參考。 它的語法如下: display:none | inline | block | list-item | inline-block | table | inline...
摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語法,閉包,原型鏈,繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語法,閉包,原型鏈,繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...
閱讀 3616·2021-11-24 10:22
閱讀 3686·2021-11-22 09:34
閱讀 2480·2021-11-15 11:39
閱讀 1528·2021-10-14 09:42
閱讀 3662·2021-10-08 10:04
閱讀 1553·2019-08-30 15:52
閱讀 847·2019-08-30 13:49
閱讀 3015·2019-08-30 11:21