如何定义和使用CSS变量

效果图：

示例3 - 使一些属性可读

如果我们想要创建更复杂的属性值的快捷方式，CSS vars非常适合使用，因此我们不必记住它。CSS属性，如box-shadow，transform和font或其他带有多个参数的CSS规则就是完美的例子。我们可以将属性放在变量中，以便我们可以通过更易读的格式重用它。

例如：

:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}

li {
  box-shadow: var(--tiny-shadow);
}

li:hover {
  transform: var(--animate-right);
}

例4 - 级联变量

标准级联规则也适用于CSS变量。因此，如果多次声明自定义属性，则css文件中最低的定义将覆盖其上方的定义。下面的示例演示了动态操作用户操作的属性是多么容易，同时仍然保持代码清晰简洁。

CSS_var.css文件：

.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}.container:hover {
  --main-text: 18px;
}

base.css文件：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}html {
  background: #eee;
  padding: 30px;
  font: 500 14px sans-serif;
  color: #333;
  line-height: 1.5;
}.orange-container {
  background: orange;
}.red-container {
  background: red;
}.red-container,
.orange-container {
  padding-top: 10px;
  padding-left: 50px;
}.container {
  background: blue;
  padding: 20px;
  color: white;
}p {
  transition: 0.4s;
}.title {
  font-weight: bold;
}

index.html文件：

    Hover orange to make blue bigger.
    
         Hover red to make blue even bigger.
        
            Hover on the different color areas to change the size of this text and the title.

        
    

效果图：

示例5 - 具有CSS变量的主题切换器

CSS变量的一个好处是它的反应性。一旦我们更新它，任何具有CSS变量值的属性也会更新。因此，只需几行Javascript和CSS变量的智能使用，我们就可以制作一个主题切换器机制。

例如：

    
        
            
        
    
    
        
        
            dark
            calm
            light
        
    
        
Stackoverflow Question
        
I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
        in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
        How do I use the globals.js inside the logic.js?
        
        

    

效果图1--刚运行：

效果图2--点击dark：

效果图3--点击calm：

效果图4--点击light：

CSS变量的使用提示

像CSS中几乎所有的东西一样，变量也非常简单易用。以下是一些未包含在示例中的提示，但在某些情况下仍然非常有用：

1）css变量区分大小写。下面的示例是两个不同的变量：

:root {
   --color: blue;
   --COLOR: red;
}

2）当您使用var（）函数时，您可以使用第二个参数。如果找不到自定义属性，将使用第二个参数为默认值：

width: var(--custom-width, 50%);

3）可以直接将CSS变量用于HTML：

body {
  max-width: var(--size)
}

4) 可以在其他CSS var中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

5) 可以使用媒体查询使CSS变量成为条件。例如，以下代码根据屏幕大小更改填充的值：

:root {
    --padding: 15px 
}@media screen and (min-width: 750px) {
    --padding: 30px}

6) 不要害怕在 clac() 函数中使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

当然，CSS变量不是灵丹妙药。不会解决你在CSS领域遇到的每一个问题。但是，使用它使您的代码更具可读性和可维护性。此外，它极大地改善了大型文档的易变性。只需将所有常量设置在一个单独的文件中，当您只想对变量进行更改时，就不必跳过数千行代码。

感谢各位的阅读！关于“如何定义和使用CSS变量”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！