【项目实用】Css 变量及函数

栏目: CSS · 发布时间: 5年前

内容简介:我们为何要使用css变量,css变量好用在那里?下面介绍下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>
复制代码

效果图:

【项目实用】Css 变量及函数

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 变量及函数

或者我们同样也可以使用 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>
复制代码
【项目实用】Css 变量及函数

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>
复制代码
【项目实用】Css 变量及函数

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)');
复制代码
【项目实用】Css 变量及函数

4. css 变量兼容性

【项目实用】Css 变量及函数

二、 css 函数

css 函数可以轻松让我们做到不需要任何 js 计算来实现的逻辑计算和效果哦!下面让我们看看有哪些 css 函数可以帮助到我们的吧!

一般带 () 的都是函数表达,那这样看来,我们 css 函数可真的不少啊:

【项目实用】Css 变量及函数

下面介绍几个常用的 css 函数吧~

css 函数:

一、属性函数: 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>
复制代码
【项目实用】Css 变量及函数

或者一些图标上 tips 提示

【项目实用】Css 变量及函数
使用 attr()

优点:节省标签,将可修改的内容暴露在 html 标签上。

缺点: content 的内容无法被选择也无法搜索到,不适合放关键文字。

html 标签上的 data-name 可以用 attr() 去获取,那它的 width 怎么获取并使用呢?

一、属性函数: attr() 结合 css 变量的使用

如下图实现进度条的效果:

【项目实用】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+都是可以完美支持这个属性的,所以大家可以放心大胆的使用哟!

【项目实用】Css 变量及函数

二、计算函数: counter()

css 的计数器大家一定不会很陌生吧,我们常用来给列表编号,方便又好用!

【项目实用】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() 还可以帮我们算数! 例如,我们可以结合 inputchecked 属性来做到 js 的计算效果:

【项目实用】Css 变量及函数
.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>
复制代码

三、计算函数: calc()

.box {
    width: calc(100% - 20px);
}
复制代码
【项目实用】Css 变量及函数

计算函数: calc() 实例:

假如我们有一个logo,作为背景图原本是放在页面的左上方的,突然需求变了,需要将此logo放在页面的右下方,那我们用 calc() 使用再好不过了,因为 calc() 还可以帮我们计算出想要的间距,如: form:

【项目实用】Css 变量及函数
body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) 25px 25px no-repeat;
}
复制代码
【项目实用】Css 变量及函数
body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) calc(100% - 25px) calc(100% - 25px) no-repeat;
}
复制代码

我们的计算函数 calc() 同样可以用在布局上哦:

【项目实用】Css 变量及函数
【项目实用】Css 变量及函数

好用的 calc() 兼容性也是超级棒的:

【项目实用】Css 变量及函数

四、滤镜函数: filter()

滤镜函数完全就是 css 版的 ps 哇!

【项目实用】Css 变量及函数
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
复制代码
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
复制代码

五、动画函数: cubic-bezier()

【项目实用】Css 变量及函数

动画曲线由4个点组成,p0和p1的坐标固定为:(0,0) 和 (1,1)。p2和p3两个点任意拖动就可以组成我们的动画曲线了。

css 为我们调好了几个动画曲线参数,我们可以直接使用,如 linear ease ease-in ease-in-out

【项目实用】Css 变量及函数
【项目实用】Css 变量及函数
【项目实用】Css 变量及函数
【项目实用】Css 变量及函数

点击在线生成 cubic-bezier动画曲线

上面这个网站大家可以自行生成想要的动画曲线路径哦~ 其实 animate.css 也帮我们设置好了很多曲线变量,大家也可以直接使用的。

【项目实用】Css 变量及函数

我们可以查看它的源码,都是官方调试好的贝塞尔曲线运动路径

【项目实用】Css 变量及函数

以上就是一些日常的 css 变量和 css 函数 tips 了,大家有get到知识嘛~麻烦给我一个小心心哦:heart:~


以上所述就是小编给大家介绍的《【项目实用】Css 变量及函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

离散数学及其应用(原书第7版)

离散数学及其应用(原书第7版)

Kenneth H. Rosen / 徐六通、杨娟、吴斌 / 机械工业出版社 / 2015-1-1 / 129

《计算机科学丛书:离散数学及其应用(原书第7版)》是介绍离散数学理论和方法的经典教材,已经成为采用率最高的离散数学教材,被美国众多名校用作教材,获得了极大的成功。中文版也已被国内大学广泛采用为教材。作者参考使用教师和学生的反馈,并结合自身对教育的洞察,对第7版做了大量的改进,使其成为更有效的教学工具。《计算机科学丛书:离散数学及其应用(原书第7版)》可作为1至2个学期的离散数学课入门教材,适用于数......一起来看看 《离散数学及其应用(原书第7版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具