簡單介紹 CSS Variables

2021-09-19 11:08:55 字數 819 閱讀 8326

如果我們用過動態樣式語言(像 less、 sass )的話,肯定對其中可以定義變數的特性非常喜歡,特別是隨著樣式檔案越來越複雜的時候,把一些值抽成變數會使**更好維護。現在隨著 css 的發展,目前 css variables 也引入了自己的變數,本文就對 css variables 進行簡單的介紹。

按照 css variables 規範,我們通過--*的方式來建立乙個css變數,並通過var(--foo)的方式來引用乙個變數(大小寫敏感哦)。例如:

:root 

body

css變數同樣是可巢狀使用的,:root用來定義全域性變數

我在寫這篇文章的時候,這個特性依然處於實驗階段,所以,目前來說,只有 firefox 34+ 、 chrome 49+ 以及 safari 9.1+ 支援了這個特性。另外, chrome 48 其實也支援了這個特性,使用者需要在瀏覽器位址列輸入chrome://flag/找到「enable experimental web platform」選項開啟才行。

--base-color: #f93ce9;

--background-gradient: linear-gradient(to top, var(--base-color), #444);

--container-width: 1000px;

max-width: calc(var(--container-width) / 2);

xgboost簡單介紹 xgboost介紹

xgboost是華盛頓大學博士陳天奇創造的乙個梯度提公升 gradient boosting 的開源框架。至今可以算是各種資料比賽中的大殺器,被大家廣泛地運用。接下來,就簡單介紹一下xgboost和普通的gbdt相比,有什麼不同。何為gradient boosting,gbdt請看我上篇文章 1.梯...

mysql的簡單介紹 mysql的簡單介紹

mysql的簡單介紹 資料庫的內部鏈結 1 連線管理器 使用者或應用程式連線 2 分析器 3 快取區4 優化器 優化器執行的結果交由儲存引擎,再轉向物理層 表空間 myisam每個表有三個檔案 frm 表結構 myd 表資料 myi 表索引 innodb 所有表空間再乙個檔案 資料庫失敗的原因 1 ...

CMM 簡單介紹

什麼是cmm?cmm capability maturity model 軟體能力成熟度模型 國際公認的評估軟體過程成熟度的行業標準 由美國卡內基梅隆大學的軟體工程研究所 sei software engineering institute 受美國國防部委託研究制定並在美國,隨後在全世界推廣實施的一...