内容简介:我们为何要使用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> 复制代码
效果图:
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
变量兼容性
二、 css
函数
css 函数可以轻松让我们做到不需要任何 js 计算来实现的逻辑计算和效果哦!下面让我们看看有哪些 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> 复制代码
或者一些图标上 tips 提示
attr()
优点:节省标签,将可修改的内容暴露在 html
标签上。
缺点: content
的内容无法被选择也无法搜索到,不适合放关键文字。
html
标签上的 data-name
可以用 attr()
去获取,那它的 width
怎么获取并使用呢?
一、属性函数: 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+都是可以完美支持这个属性的,所以大家可以放心大胆的使用哟!
二、计算函数: 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> 复制代码
三、计算函数: 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()
兼容性也是超级棒的:
四、滤镜函数: filter()
滤镜函数完全就是 css
版的 ps
哇!
img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } 复制代码
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 复制代码
五、动画函数: cubic-bezier()
动画曲线由4个点组成,p0和p1的坐标固定为:(0,0) 和 (1,1)。p2和p3两个点任意拖动就可以组成我们的动画曲线了。
css
为我们调好了几个动画曲线参数,我们可以直接使用,如 linear ease ease-in ease-in-out
上面这个网站大家可以自行生成想要的动画曲线路径哦~ 其实 animate.css
也帮我们设置好了很多曲线变量,大家也可以直接使用的。
我们可以查看它的源码,都是官方调试好的贝塞尔曲线运动路径
以上就是一些日常的 css 变量和 css 函数 tips 了,大家有get到知识嘛~麻烦给我一个小心心哦:heart:~
以上所述就是小编给大家介绍的《【项目实用】Css 变量及函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Golang 函数变量
- 015.Python函数名的使用以及函数变量的操作
- Shell编程—【04】函数的定义、参数、变量作用域、函数库
- JS变量声明和函数声明提升
- golang学习笔记(一):包,变量,函数
- 如何使用 Linux 内核中没有被导出的变量或函数?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++数据结构与程序设计
克鲁斯 / 钱丽萍 / 清华大学出版社 / 2004-1 / 59.00元
《C++数据结构与程序设计》这本精心制作的课本结合面向对象程序设计和C++强有力的特性,构建数据结构的基本思想,设计了程序和有趣的应用。在此过程中,《C++数据结构与程序设计》探讨了作为软件设计基本工具的问题求解和设计原理、数据抽象、递归和算法的比较分析。《C++数据结构与程序设计》使用真实的案例研究、可重用的软件开发和程序设计项目来增强理解。一起来看看 《C++数据结构与程序设计》 这本书的介绍吧!