CSS-自定义变量

番茄西红柿发布于2019-04-23 13:41 / 1043人阅读

摘要：变量的值可以是颜色字符串多个值的组合等为什么选择两根连词线表示变量为什么选择两根连词线表示变量被用掉了，被用掉了。

使用背景：

一些常见的例子：

为风格统一而使用颜色变量
一致的组件属性（布局，定位等）
避免代码冗余

*更方便的从CSS向JS传递数据（例如媒体断点）

为什么使用：

以下几点是未来CSS属性的简短说明：

动态性，可以在运行时更改
可以方便的从JS中读/写
可继承，可组合，同时具有作用域

定义：

定义
用这样的方式来声明一个变量：--variable-name: variable-value;（变量名是大小写敏感的）。变量的值可以是颜色、字符串、多个值的组合等:

:root{
    --base_color:#398bd0;
    --bg_color:#4a4a4a;
}

为什么选择两根连词线（--）表示变量？

为什么选择两根连词线（--）表示变量？
$foo被 Sass 用掉了，
@foo被 Less 用掉了。
为了不产生冲突，官方的 CSS 变量就改用两根连词线了

用法：

.res_nav ul li:hover a{color:var(--base_color);}

.res_contact_btn a:hover{background:var(--base_color);}

作用域：

使用:root 作用域来定义全局变量：

:root{ --global-var: global; }

如果想让某个变量只在部分元素/组件下可见，只需要在特定的元素下定义该变量：

 
My block is 
    awesome 


/*css文件*/
.block { --block-font-size: 1rem; font-size: var(--block-font-size); } 
.block__highlight { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

媒体查询也可以提供作用域：

@media screen and (min-width: 1025px) { 
    :root { 
        --screen-category: desktop;
     } 
}

下面一个例子来展示伪类下的作用域（例如，:hover）：

GPU云服务器云服务器自定义css 变量变量定义 css自适应自定义

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

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

CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

light 2019-08-02 16:14 评论0 收藏0
CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

yankeys 2019-08-29 18:43 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：和这样的预处理器，让我们的代码保持良好的结构和可维护性。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。而你是无法对预处理器中的变量做上面这些操作的。本文翻译自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处：葡萄城官网，葡萄城...

番茄西红柿 2019-04-23 13:26 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：变量，或者用它的官方称谓，叫作自定义属性，已经可用，并且有非常棒的浏览器支持，而也正在取得进展。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Sass和Less这样的预处理器，让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixin...

source 2019-08-29 16:33 评论0 收藏0
CSS 自定义属性 - 入门

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

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