什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域
CSS变量能帮助我们干什么
在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
在像CSS这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。
CSS 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量
一、什么是CSS变量
CSS 变量当前有两种形式：
变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量
二、变量的声明
变量的命名
变量声明使用两根连词线--表示变量，$color是属于Sass的语法，@color是属于Less的语法，为避免冲突css原生变量使用--）
注意: 变量名大小写敏感，--header-color和--Header-Color是两个不同变量
声明方式
CSS变量声明的方式非常简单，如下，声明了一个名叫color的CSS变量。
在css文件中写
写在html标签的inline-style里
用JS给某个元素声明，方法.style.setProperty
body{
--color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接
--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数，将它们连接
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}如果变量值带有单位，就不能写成字符串
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);注意: 变量值只能用作属性值，不能用作属性名
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}上面代码中，变量--side用作属性名，这是无效的
三、CSS变量的继承&作用域
自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素
class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>定义下面的CSS：
.two { --test: 10px; }
.three { --test: 2em; }在这个例子中，var(--test)的结果是：
class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值
最顶层的作用域就是:root
四、响应式
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}五、与预处理器的不同
1、预处理器变量不是实时的
$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}编译结果
.mediabox {
background: #7F583F;
}2、预处理器不能限定作用域
$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}编译为
ul {
color: blue;
}3、预处理器变量不可互操作
原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用
六、JS操作变量
CSS 变量可以和 JS 互相交互
:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'七、兼容性
检测浏览器是否支持CSS自定义属性的方法
/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}总结
相较于传统的 LESS 、SASS 等预处理器变量，CSS 变量的优点在于:
CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改
CSS 变量能够继承，能够组合使用，具有作用域
配合 Javascript 使用，可以方便的从 JS 中读/写
相关文章：
相关视频：
Atas ialah kandungan terperinci 什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1385
52
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
