建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
?妙用CSS變量，讓你的代碼更優(yōu)雅
CSS 變量基礎(chǔ)知識
- 聲明變量 【通過 --連接變量名 】：
:root {
--test: red;
}
- 使用變量 【var(變量名)讀取變量】：
.test {
color: var(--foo);
}
- 作用域 優(yōu)先級最高的選擇器聲明生效。
適配 iphone x 劉海屏
Apple 在發(fā)布 iPhone X 后引入了一個新概念：安全區(qū)域(Safe Area)，安全區(qū)域指屏幕內(nèi)不受圓角、劉海、底部小黑條等元素影響的可視窗口。如下圖：
如何適配這種屏幕，有2個步驟：
- HTML 中指定 viewport-fit 為 cover，讓頁面充滿全屏;
- CSS 中可用 env() 獲取對應(yīng)安全區(qū)域。
.safe-area {
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
由于兼容性，iOS 11 用的是 constant()，但從 iOS 11.2 開始改用 env()。如果用 CSS 變量來實現(xiàn)(ChatUI 源碼實現(xiàn))，感覺挺好的，如下：
:root {
--safe-top: 0px;
--safe-bottom: 0px;
}
@supports (top: constant(safe-area-inset-top)) {
:root {
--safe-top: constant(safe-area-inset-top);
--safe-bottom: constant(safe-area-inset-bottom);
}
}
@supports (top: env(safe-area-inset-top)) {
:root {
--safe-top: env(safe-area-inset-top);
--safe-bottom: env(safe-area-inset-bottom);
}
}代碼邏輯如下：
- 先定義 --safe-top、--safe-bottom 2個 CSS 自定義變量；
- 通過 @supports 來判斷當(dāng)前瀏覽器是否支持 constant() / env() ；
- 在支持的情況下，把取到的值賦給 CSS 自定義變量。然后在需要使用的地方就可以這樣用了：
.navbar {
padding-top: var(--safe-top);
}
body {
height: calc(100vh - var(--safe-bottom));
}
實現(xiàn) 1px 邊框
同樣的，以往的代碼我們可能是使用 scss 語法來實現(xiàn)， 會實現(xiàn)一段比較復(fù)雜的傳參等：
@mixin retina-border($top: 0, $right: 0, $bottom: 0, $left: 0, $cor: #000000) {
}
// 調(diào)用
@include retina-border();如果使用了 css 變量，代碼變得很簡單，也更靈活：
.hairline {
position: relative;
}
.hairline::after {
content: ' ';
position: absolute;
width: 200%;
height: 200%;
border: 0 solid var(--hairline-color, #f2f4f5);
border-width: var(--hairline-width, 1px);
border-radius: calc(var(--hairline-radius) * 2);
pointer-events: none;
transform: scale(0.5);
transform-origin: 0 0;使用如下：
...
/* 修改顏色 */
.beidan {
--hairline-color: #e9e9e9;
}
最后
css 變量可以讓你的代碼更靈活，更優(yōu)雅，可以看到各大開源庫全部都擁抱 css 變量了，是時候可以拋棄 scss 了。
網(wǎng)站題目：?妙用CSS變量，讓你的代碼更優(yōu)雅
分享地址：http://www.dlmjj.cn/article/dhcdeps.html
