【CSS】CSS使用变量与变量定义

如何定义可以在CSS中使用的变量

CSS变量(也称为自定义属性)的定义规则如下:

  1. 使用–作为前缀,后跟变量名。变量名可以由字母、数字、连字符和下划线组成,并且不能以连字符开头。
  2. 变量名区分大小写。
  3. 变量定义在选择器范围内的任何地方,但通常会将其定义在 :root 伪类中,以使其在整个文档中可用。
  4. 变量定义使用以下语法:--variable-name: value;,其中 value 可以是任何有效的CSS值,例如颜色、长度、字体等。
  5. 变量的值可以是其他变量或计算表达式,例如 --primary-color: var(--secondary-color);--width: calc(100% - 20px);
  6. 变量值不需要引号,除非值本身包含特殊字符。
  7. 变量可以在选择器的任何地方使用,通过 var() 函数来引用它们,如 property: var(--variable-name);

这些规则使您能够在CSS中定义和使用变量,以实现样式重用和动态样式的目的。


CSS中的定义变量并使用

当使用CSS变量时,可以在任何属性的值中引用它们。以下是一些示例,展示了如何在CSS中使用变量:

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

.header {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

.button {
  color: var(--primary-color);
  font-size: calc(var(--font-size) * 1.2);
}

.container {
  border: 1px solid var(--primary-color);
  padding: 10px;
  margin-top: calc(var(--font-size) + 20px);
}

:rootCSS中的一个伪类,表示文档的根元素。在HTML文档中,根元素通常是 元素。

使用 :root 伪类来定义CSS变量时,可以确保变量在整个文档中都是有效的,并且可以被其他选择器引用和使用。

在示例中的代码块中,:root 伪类用于定义变量 --primary-color--font-size。这意味着这些变量可在整个文档中被引用,并且可以适用于任何元素或选择器。

.header 类选择器中,background-color 属性的值使用了 var(--primary-color),这意味着背景颜色将根据 --primary-color 变量的值来渲染。

.button 类选择器中的 colorfont-size 属性也使用了 var(--primary-color)var(--font-size),分别将文本颜色和字体大小设置为相应变量的值,并且在 font-size 属性中使用了 calc() 函数进行动态计算。

.container 类选择器中,border 属性的值和 margin-top 属性的值都使用了 var(--primary-color)var(--font-size),分别用于边框颜色和外边距的计算。

通过使用CSS变量,您可以轻松地在整个样式表中重用值,并且如果需要更改这些值,只需更改变量的定义即可,而不必在代码中逐个替换每个使用该值的地方。

在媒体内定义变量

CSS变量还可以在媒体查询和伪类中使用,使其更加灵活和动态。例如:

@media screen and (max-width: 768px) {
  :root {
    --primary-color: #00ff00;
  }
}

在上述媒体查询中,我们在屏幕宽度小于等于768像素时将 --primary-color 变量的值更改为绿色。

使用CSS变量可以帮助您更好地组织和管理样式,并提供更大的灵活性和可维护性。


JS中定义的变量并在CSS中使用

子元素在父元素内部左右移动
【CSS】CSS使用变量与变量定义_第1张图片
代码

DOCTYPE html>
<html>
  <head>
    <title> Document title>
    <style>
      .container{
        width:  80%;
        height: 300px;
       border:3px solid #aaa;
       position: relative;
       margin: 0 auto;
      }

      .item{
        width: 100px;
        height: 100px;
       border-radius: 50%;
       background: #f40;
       left: 0;
       top: 30px;
       position: absolute;
       animation: move 4s linear infinite;
      }

    @keyframes move {
      50% {   
        transform: translateX(calc(var(--w) - 100%));
      }
    }
  style>
  head>
  <body>
    <div class="container">
      <div class="item">div>
    div>
    <script>
      const container = document.querySelector(".container");
      const w = container.clientWidth;
      container.style.setProperty('--w',w + 'px');
  script>
  body>
html>

第一步、在js中添加变量--w

  1. 使用document.querySelector获取classcontainer的元素,使用clientWidth获取.container元素的宽度,在.container设置一个自定义变量--w,值为container 元素的宽度。
      const container = document.querySelector(".container");
      const w = container.clientWidth;
      container.style.setProperty('--w',w + 'px');

运行看看变量加哪了

【CSS】CSS使用变量与变量定义_第2张图片

第二步、在css中使用变量--w

2、在item元素获取.container父元素的宽度

var(--w)

扩展

calc 中运算符的书写规则

1、没有动画效果,可能是由于calc格式错误,导致-运算符没有起到作用
calc属性不起作用是因为书写格式错误,正确的格式需要在运算符的两边留有空格。

错误写法

      50% {   
        transform: translateX(calc(var(--w)-100%));
      }

正确写法

      50% {   
        transform: translateX(calc(var(--w) - 100%));
      }

你可能感兴趣的:(语言-JavaScript,语言-HTML,css,变量,JavaScript,var,calc,html)