css变量与css函数

最新推荐文章于 2023-07-03 15:54:17 发布

天宫之皓月

最新推荐文章于 2023-07-03 15:54:17 发布

阅读量300

点赞数

分类专栏： css 文章标签： css 前端 less

本文链接：https://blog.csdn.net/micr_cai/article/details/124617244

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
使用变量的一种好处。您可以将常用值放在变量中，而不必一遍又一遍地复制和粘贴相同的值。

使代码更易于阅读（更容易理解）
使修改重复值更加容易

变量声明

声明变量的时候，变量名前面要加两根连词线（–）。
语法 --<name>: <value>;

注意：
变量值只能用作属性值，不能用作属性名。
CSS 变量名称是大小写敏感的，–foo 和 --Foo 是两个不同的变量。这一点与 CSS 属性大小写不敏感是有区别的。

读取变量

var() 函数用于读取 CSS 变量的值。
var(custom-property-name, value)

如果变量值带有单位，就不能写成字符串。

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

作用域

首先：CSS 变量可以有全局或局部作用域。
全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  --foo: 20px;
  font-size: var(--foo); 
  background-color: var(--blue); 
}

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {

  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

var()函数还可以使用第二个参数

第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

参考：

https://www.jianshu.com/p/cd583e30719d
https://www.ruanyifeng.com/blog/2017/05/css-variables.html

calc() 函数

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}
 
#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

参考：https://www.runoob.com/cssref/func-calc.html

max()

max() 函数让你可以从一个逗号分隔的表达式列表中选择最大的值作为属性的值。
max(value1, value2, ...)

#div1 {
  background-color: yellow;
  height: max(50%, 300px);
  /* 属性: max(expression [, expression]) */
  width: max(10vw, 4em, 80px);
}

在上面这个例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽。简单来说，最小宽度是 80px。你也可以认为 max() 的值提供了一个属性最小可能的值。

min()

min(value1, value2, ...)

#div1 {
  background-color: yellow;
  height: min(50%, 300px);
  /* 属性: min(expression [, expression]) */
  width: min(1vw, 4em, 80px);
}

在上面的例子中，宽度最多是 80px。如果视口的宽度小于 800px，或者一个 em 的宽度小于 20px，则会更窄。换句话说，最大宽度是 80px，

attr()

attr() 函数返回选择元素的属性值。
attr(attribute-name)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        a:after {
            content: " (" attr(href) ")";
        }
    </style>
</head>

<body>
    <p><a href="http://www.runoob.com">菜鸟教程</a></p>
    <p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p>
</body>

</html>

天宫之皓月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css变量与css函数

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用变量的一种好处。使代码更易于阅读（更容易理解）使修改重复值更加容易var() 函数用于读取 CSS 变量的值。calc() 函数用于动态计算长度值。attr() 函数返回选择元素的属性值。
复制链接

扫一扫