这两天没事翻看CSS文档，发现了其中有意思的一个东西——CSS函数。有几个是熟悉的，可是下图画红线的几个函数，从来没见过。随便看看学习下，随着学习的深入，我又发现了CSS变量这个新奇的概念。之前提到CSS变量让我想到的是less和sass这些预处理器，原生CSS的还真没了解过，今天就一探究竟。
笔记内容来源于网上文档学习之后再个人总结，所以先贴上文档链接来源为敬：http://www.ruanyifeng.com/blog/2017/05/css-variables.html
以下代码内容部分为个人总结笔记的完整文档，你可以直接复制到编辑器，然后运行起来玩玩，你将会发现CSS世界里的新大陆。
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css变量的学习title> <style> /* *CSS选择器不能是数字开头，JS中的变量是不能直接数值的， *但是，在CSS变量中，这些限制通通没有。 *但不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合， *但是可以是中文，日文或者韩文。 */ /* 1. 声明：大小写敏感, --variable-name: variable-value; 2. 使用：使用var(变量名)来使用一个变量 */ /* 使用 :root{} 来定义全局css变量 */ :root { --mouse: 100; --color: skyblue; /* 变量值是字符串 */ --text: '小笑残虹'; /* 使用 CSS 变量 使 JavaScript 与 CSS 通信 */ --foo: if(x > 5) this.width=10; } /* 当变量的值是数值时，必须使用calc()函数计算 */ .box1 { width: calc(var(--mouse) * 1px); height: calc(var(--mouse) * 1px); background: var(--color); } /* 3. 变量组合使用 使用变量的时候，通常不会单独使用，可以组合使用 当变量的值是字符串时，可以直接拼接，如下 */ .box1::after { content: 'text值:'var(--text); } /* 4. 变量未定义和错误定义，则使用默认值 */ .box2 { --color: yellow; width: calc(var(--mouse) * 2px); height: calc(var(--mouse) * 2px); background: var(--c, #cd0000); margin-top: 20px; } p { margin: 0; } /* 继承和作用域 */ /* 1. 作用域 使用:root{}来定义全局css变量 想让变量在局部可用，就定义在某个特定的选择器下 还是下面这段代码 2. 继承 */ .p1 { width: 100px; height: 100px; background: var(--color); } .p2 { width: 100px; height: 100px; background: var(--c); } /* 响应式布局 */ @media screen and (max-width: 800px) { :root { --mouse: 50; --color: pink; } } /* 兼容性处理 使用@support命令进行检测。 */ a { color: #7F583F; color: var(--primary); } @supports ((--a: 0)) { /* supported */ } @supports (not (--a: 0)) { /* not supported */ } /* 与预处理器(sass,less)比较 */ /* *1. css变量： 动态性，可以在运行时更改 可以方便地从js读写 可继承，可组合，有作用域 2. 预处理器： 预处理器的变量不是动态的，在运行时不可更改 预处理器的变量没有作用域的说法 不能与js交互 */style>head><body> <div class="box1">div> <div class="box2"> <p class="p1">继承父变量，黄色p> <p class="p2">继承根变量，红色p> div>body><script> // JavaScript 也可以检测浏览器是否支持 CSS 变量。 const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ } // JavaScript 操作 CSS 变量的写法如下。 var root = getComputedStyle(document.documentElement); // 读取变量 var color = root.getPropertyValue('--color').trim(); console.log(color); // 'skyblue' var foo = root.getPropertyValue('--foo'); console.log(foo) // 设置变量 // document.body.style.setProperty('--primary', '#7F583F'); document.documentElement.style.setProperty('--color', 'black'); var color = root.getPropertyValue('--color').trim(); console.log(color); // 'black' // 删除变量 // document.body.style.removeProperty('--primary'); document.documentElement.style.removeProperty('--color'); var color = root.getPropertyValue('--color').trim(); console.log(color); // 'skyblue' // 这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。 const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { // docStyle.setProperty('--mouse', e.clientX); docStyle.setProperty('--mouse-x', e.clientX); docStyle.setProperty('--mouse-y', e.clientY); var x = docStyle.getPropertyValue('--mouse-x').trim(); var y = docStyle.getPropertyValue('--mouse-y').trim(); console.log(x,y) });script>html>
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
