【項目實用】Css 變量及函數

1、css變量

咱們爲什麼要使用css變量，css變量好用在那裏？下面介紹下css變量的各類優勢。

如何定義一個css變量：

:root {
    --red: #f30a0a;
}
.box {
    color: var(--red);
}
複製代碼

變量定義語法是：--*
變量使用語法是: var(--*)

css變量命名規則：

body {
    --深藍: #369;
    background-color: var(--深藍);
}
複製代碼

變量命名不能包含 $,[,^,(,% 等字符 普通字符侷限在只要是數字[0-9]／字母[a-zA-Z]／_／-這些組合。 還能夠是中文，日文或者韓文； 變量名大小寫敏感， --blue 和 --Blue 是兩個不一樣變量。

變量值只能做用屬性值，不能用做屬性名，如下是變量的錯誤定義：

.foo {
    --side: margin-top;
    var(--side): 20px;
}
複製代碼

變量值帶有單位，不能寫成字符串： 錯誤定義：

body {
    --size: 20;
    font-size: var(--size)px;
}
複製代碼

正肯定義：

body {
    --size: 20px;
    font-size: var(--size);
}
複製代碼

或:

body {
    --size: 20;
    font-size: calc(var(--size) * 1px);
}
複製代碼

css變量中 sass / less / css 表達的差別：

sass:  $black: #333;
less:  @black: #333;
css:   --black: #333;
複製代碼

能夠看出 css 變量爲咱們帶來一些預處理器的便利，而且不須要額外的編譯；

css變量適用場景：

1.html標籤和css類名分別使用css變量：

:root {
    --red: #f30a0a;
    --blue: blue;
}
.box {
    color: var(--red);
}
複製代碼

<div class="box">內容顏色爲紅色哦</div>
<svg>
    <rect x="20" y="20" rx="20" ry="20" width="250" height="100" fill="var(--blue)"/>
</svg>
複製代碼

效果圖：

2.css 變量適用 svg 圖標變色

.warn {
    --icon-color: red;
}
.pass {
    --icon-color: green;
}
複製代碼

<svg t="1558780629039" class="warn" viewBox="0 0 1024 1024" p-id="739" width="200" height="200" fill="var(--icon-color)"><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" p-id="740"></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" p-id="741"></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="742"></path></svg>
複製代碼

或者咱們一樣也可使用 css 變量關鍵字 currentColor 達到以上效果：

.warn {
  color: red;
}
.pass {
  color: green;
}
複製代碼

<svg t="1558780629039" class="warn" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="739" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill=currentColor><defs><style type="text/css"></style></defs><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" p-id="740"></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" p-id="741"></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="742"></path></svg>
複製代碼

3.css變量使用響應式佈局（效果form：zhangxinxu)

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
.box {
    width: 50%;
    min-width: 320px;
    margin: auto;
    overflow: hidden;
}
.cell {
    width: calc((100% - var(--margins) * var(--columns) * 2) / var(--columns));
    margin: var(--margins);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #f0f3f9;
    float: left;
}
.cell-header {
    background: currentColor;    
}
.cell-title {
    color: #fff;
    padding: var(--space);
    font-size: var(--fontSize);
}
.cell-content {
    height: 150px;
    padding: var(--space);
    font-size: var(--fontSize);
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}
複製代碼

<div class="box">
    <div class="cell" style="color: #F44336;">
        <header class="cell-header">
          <div class="cell-title">紅色</div>
        </header>
        <main class="cell-content">改變瀏覽器的寬度</main>
      </div>
      <div class="cell" style="color: #E91E63;">
        <header class="cell-header">
          <div class="cell-title">粉色</div>
        </header>
        <main class="cell-content">會看到佈局發生了變化</main>
      </div>
      <div class="cell" style="color: #9C27B0;">
        <header class="cell-header">
          <div class="cell-title">紫色</div>
        </header>
        <main class="cell-content">僅僅是經過CSS改變一個變量值實現</main>
      </div>
      <div class="cell" style="color: #00BCD4;">
        <header class="cell-header">
          <div class="cell-title">青色</div>
        </header>
        <main class="cell-content">這比傳統的響應式處理要更省代碼更好維護</main>
      </div>
      <div class="cell" style="color: #009688;">
        <header class="cell-header">
          <div class="cell-title">茶色</div>
        </header>
        <main class="cell-content">本例子主要爲了演示響應式與變化效果</main>
      </div>
      <div class="cell" style="color: #4CAF50;">
        <header class="cell-header">
          <div class="cell-title">綠色</div>
        </header>
        <main class="cell-content">因此，至於佈局變化細節是否合理就不用在乎了。</main>
    </div>
</div>
複製代碼

4.js 操做 css 變量

:root {
    --red: red;
    --blue: blue;
}
.box {
    width: 100px;
    height: 100px;
    background: var(--blue);
}
複製代碼

<div class="box"></div>
複製代碼

var box = document.querySelector('div');
box.style.setProperty('--blue','var(--red)');
複製代碼

4.css 變量兼容性

2、css 函數

css 函數能夠輕鬆讓咱們作到不須要任何 js 計算來實現的邏輯計算和效果哦！下面讓咱們看看有哪些 css 函數能夠幫助到咱們的吧！

通常帶 () 的都是函數表達，那這樣看來，咱們 css 函數可真的很多啊：

下面介紹幾個經常使用的 css 函數吧～

css函數：

1、屬性函數: attr()

.pic {
    width: 150px;
    height: 200px;
    position: relative;
    display: block;
}
.pic img {
    height: 100%;
    display: block;
}
.pic:hover::before {
    position: absolute;
    content: attr(data-description);
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFF;
    background: rgba(0,0,0,.7);
}
複製代碼

<a class="pic" href="#" data-description="我想混吃等死">
    <img src="https://bookcover.yuewen.com/qdbimg/349573/1014983106/180"/>
</a>
複製代碼

或者一些圖標上 tips 提示

使用 attr()
優勢：節省標籤，將可修改的內容暴露在html標籤上。
缺點： content的內容沒法被選擇也沒法搜索到，不適合放關鍵文字。

html標籤上的data-name能夠用attr()去獲取，那它的width怎麼獲取並使用呢？

1、屬性函數: attr() 結合 css 變量的使用

以下圖實現進度條的效果：

.line {
    background: #3e58d7;
    width: 80%;
    height: 10px;
    margin: 100px auto;
    position: relative;
}
.line::before {
    position: absolute;
    content: '';
    left: 0;
    width: var(--percent);
    height: 10px;
    background: #ff002d;
    max-width: 100%;
    min-width: 0%;
}
.line::after {
    position: absolute;
    content: '';
    width: 2px;
    height: 10px;
    background: white;
    left: calc(var(--percent) - 1px);
}
複製代碼

<div class="line" style="--percent:14%;">
複製代碼

attr()的兼容性也很是的好，IE8+都是能夠完美支持這個屬性的，因此你們能夠放心大膽的使用喲！

2、計算函數: counter()

css 的計數器你們必定不會很陌生吧，咱們經常使用來給列表編號，方便又好用！

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS counter()函數詳解-CSS教程</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style> ol{margin:0;padding:0;list-style:none;counter-reset:item;} li{padding-left:2em;} li:before{counter-increment:item;content:counter(item)".";color:#f00;} </style>
</head>
<body>
<ol class="test">
    <li>Node
        <ol>
            <li>Node
                <ol>
                    <li>Node</li>
                    <li>Node</li>
                </ol>
            </li>
                <li>Node</li>
        </ol>
    </li>
    <li>Node</li>
    <li>Node</li>
</ol>
</body>
</html>
複製代碼

除了給列表編號，counter()還能夠幫咱們算數！ 例如，咱們能夠結合input的checked屬性來作到js的計算效果:

.box {
    counter-reset: characters;
}
input:checked {
    counter-increment: characters
}
.total {
    position: relative;
    padding-right: 10px;
}
.total:after {
    position: absolute;
    content: counter(characters);
}
複製代碼

<div class="box">
    <p>選擇你想要吃的水果</p>
    <input type="checkbox" value="蘋果"/>蘋果
    <input type="checkbox" value="橘子"/>橘子
    <input type="checkbox" value="檸檬"/>檸檬
    <p>你一共選擇了<span class="total"></span>種水果</p>
</div>
複製代碼

3、計算函數: calc()

.box {
    width: calc(100% - 20px);
}
複製代碼

計算函數: calc() 實例：

假如咱們有一個logo，做爲背景圖本來是放在頁面的左上方的，忽然需求變了，須要將此logo放在頁面的右下方，那咱們用calc()使用再好不過了，由於calc()還能夠幫咱們計算出想要的間距，如： form：

body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) 25px 25px no-repeat;
}
複製代碼

body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) calc(100% - 25px) calc(100% - 25px) no-repeat;
}
複製代碼

咱們的計算函數calc()一樣能夠用在佈局上哦：

好用的calc()兼容性也是超級棒的：

4、濾鏡函數: filter()

濾鏡函數徹底就是 css 版的 ps 哇！

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
複製代碼

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
複製代碼

5、動畫函數: cubic-bezier()

動畫曲線由4個點組成，p0和p1的座標固定爲：(0，0) 和 (1,1)。p2和p3兩個點任意拖動就能夠組成咱們的動畫曲線了。

css 爲咱們調好了幾個動畫曲線參數，咱們能夠直接使用，如linear ease ease-in ease-in-out

點擊在線生成 cubic-bezier動畫曲線

上面這個網站你們能夠自行生成想要的動畫曲線路徑哦～ 其實animate.css 也幫咱們設置好了不少曲線變量，你們也能夠直接使用的。

咱們能夠查看它的源碼，都是官方調試好的貝塞爾曲線運動路徑

以上就是一些平常的 css 變量和 css 函數 tips 了，你們有get到知識嘛～麻煩給我一個當心心哦❤️～