原生css变量声明

Imfan 发布于2019-08-29 15:13 / 2788人阅读

摘要：原生变量声明噫我为什么要用原生这个名词啊，管他呢。我发现了一个不得了的东西，接触前端都有一年多的时间了，今天才知道原生也可以变量声明这个黑科技啊。

原生css变量声明

噫~~~
我为什么要用原生css这个名词啊，管他呢。
我发现了一个不得了的东西，接触前端都有一年多的时间了，今天才知道原生css也可以变量声明这个黑科技啊。
我是不是和时代脱轨太长时间了。
好了，来吧，介绍一下这个东东。
统计一下，知道这个东西的同学请在下方评论打1

定义css变量

我们都知道使用less或者sass这些预处理语言，可以做到变量声明，下面举个例子，声明一个颜色是白色的变量,变量名是mio

less

@mio : #fff;
div{
    color : @mio;
}

sass

$mio : #fff;
div{
    color : $mio;
}

css

*{
    --mio : #fff;
}
div{
    color : var(--mio);
}

注意css的写法，声明变量必须写在选择器里面，变量名用--定义。

用处

结合变量声明这个功能，可以做到定义全局的公共样式，比如主题色，比如官方板块间距，比如移动端适配不同屏幕页面的排版方式之类的。
我们再结合css3提供的cacl()计算属性，这个属性支持四则运算，支持的单位有rem,em,%,px,使用时在运算符号两边加空格。
举个例子：

:root{
    --cellwidth:200px;
    --cellheight: calc(var(--cellwidth) / 4);
}
div{
    width: var(--cellwidth);
    height: var(--cellheight);
    line-height: var(--cellheight);
    margin-top: calc(var(--cellwidth) - var(--cellheight) + 2px);
}

这段代码计算的div，宽200px，高50px，行高50px，margin-top是52px
运行后的结果：

妈耶，太厉害了，css越来越厉害了

云服务器 GPU云服务器声明变量 python变量声明 Ruby变量声明 asp变量声明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113179.html

原生css 中变量的使用

摘要：函数还可以使用第二个参数，表示变量的默认值。注意，变量值只能用作属性值，不能用作属性名。如果变量值是数值，不能与数值单位直接连用。六兼容性处理对于不支持变量的浏览器，可以采用下面的写法。那些对无用的信息，也可以放入变量。前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异...

番茄西红柿 2019-04-23 13:10 评论0 收藏0
CSS Variables

摘要：七与预处理器的不同七与预处理器的不同预处理器变量不是实时的编译结果预处理器不能限定作用域编译为预处理器变量不可互操作原生的自定义属性可以与任何预处理器或纯文件一起使用。CSS原生变量(CSS自定义属性) 示例地址：https://github.com/ccyinghua/Css-Variables 一、css原生变量的基础用法变量声明使用两根连词线--表示变量，$color是属于Sass的...

番茄西红柿 2019-04-23 13:40 评论0 收藏0
CSS 自定义属性 - 入门

摘要：变量的函数引用的自定义属性被称为变量。为此，可读性和可维护性是自定义属性最大的优势。自定义属性作用域在中，变量有作用域一说。因此，在选择器中声明的自定义属性，其作用域的范围是全局范围，也就是全局作用域。引言 CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一...

seanlook 2019-08-30 15:44 评论0 收藏0
CSS Variable Study

摘要：在像这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。可以被使用在任意的地方。 CSS变量能帮助我们干什么在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。在像CSS这种声明式语言中，随着...

hersion 2019-08-29 16:09 评论0 收藏0
在原生CSS中使用变量

摘要：而现在，我们可以在原生中使用变量了先来两个在线感受一下定义变量，也称为自定义属性。但是局部变量只能够在被申明的元素及其子元素中使用。在中使用变量变量是的一部分，这意味着我们可以通过来访问修改变量的值，这是等预处理器所做不到的。本文首发于我的博客一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。...

FreeZinG 2019-08-30 14:03 评论0 收藏0