咱们为什么要使用css变量,css变量好用在那里?下面介绍下css变量的各类优势。 css
css
变量::root {
--red: #f30a0a;
}
.box {
color: var(--red);
}
复制代码
变量定义语法是:--*
变量使用语法是: var(--*)
html
css
变量命名规则:body {
--深蓝: #369;
background-color: var(--深蓝);
}
复制代码
变量命名不能包含 $,[,^,(,% 等字符 普通字符局限在只要是数字[0-9]/字母[a-zA-Z]/_/-这些组合。 还能够是中文,日文或者韩文; 变量名大小写敏感, --blue 和 --Blue 是两个不一样变量。 git
变量值只能做用属性值,不能用做属性名,如下是变量的错误定义:github
.foo {
--side: margin-top;
var(--side): 20px;
}
复制代码
变量值带有单位,不能写成字符串: 错误定义:web
body {
--size: 20;
font-size: var(--size)px;
}
复制代码
正肯定义:浏览器
body {
--size: 20px;
font-size: var(--size);
}
复制代码
或:sass
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
复制代码
css
变量中 sass / less / css
表达的差别:app
sass: $black: #333;
less: @black: #333;
css: --black: #333;
复制代码
能够看出 css
变量为咱们带来一些预处理器的便利,而且不须要额外的编译;less
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>
复制代码
效果图:ide
.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>
复制代码
.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>
复制代码
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
变量兼容性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>
复制代码
使用 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到知识嘛~麻烦给我一个当心心哦❤️~