搜索
首页web前端html教程CSS变量试玩儿_html/css_WEB-ITnose

CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass、LESS、Stylus(笔者建议Sass的SCSS语法),这些预处理器可以很大程度的提高CSS的灵活性,增强CSS的代码组织与维护。但是毕竟不是亲生的,然后负责CSS开发的那些大牛们坐不住了,开始给CSS赋予一些新的特性,本文就来探讨下CSS变量的进展与应用。
W3C的关于CSS变量的最新探索体现在CSS Custom Properties for Cascading Variables Module Level 1中,最新更新在2014年5月6日,目前为工作草案,所以本文章只为研究探索只用,所涉知识点存在修改的风险,W3C修改之后本文会同步更新。

所为何来

我们知道,一个网站或应用往往包含大量的CSS,这些CSS里的一些属性值往往重复使用,比如网站使用的颜色体系,背景色、文字颜色、链接颜色等,这些重复使用的属性值散落在大量的CSS文档中,如果需要修改其中的一些值,例如改版颜色,那简直是个噩梦,我们需要每个文件进行查找、替换,眼花缭乱、机械重复的大量操作难免出错、难免头大,所以CSS代码的组织与维护已经成了困扰CSS使用的重要瓶颈。
当然,CSS预处理可以有效的解决这些问题,预处理器的使用已经成了事实上的行业标准,Sass正成为越来越多前端er的选择。但是,我们需要部署编译环境、需要让开发工具支持Sass等,需要一些额外的工作。遇事不免畅想,如果有一天,我们可以像使用普通CSS那些使用预处理器?
于是便有了W3C的CSS Various。

剥茧抽丝

关于变量,不外乎定义和使用,接下来我们分别解析。

定义变量

我们把需要重复使用的值存放到一个自定义的属性中,这个自定义的属性用双虚线开头标识,如下面代码所示。

/* 变量定义 */:root {  --main-color: #06c;}/* 变量使用 */#foo h1 {  color: var(--main-color);}

变量名

自定义属性名和变量名遵循CSS标识符的定义规则,可以包含字母数字(a-z,A-Z,0-9)、ISO 10646字符列表的U+00A0及以上字符、下划线(_)、连字符(-)等,不能以数字、连字符+数字、双连字符开始。
CSS变量语法中,大小写敏感,可以包含字母、数字、下划线、连字符,且最好不以数字、连字符开头。

/* 正确的变量名 */:root{	--link-color: #06c;	--_hover-color: #f6c;	--toolTip_color: #ff0;	--main_background_color: #333;}/* 下面两个变量都有效,表示两个变量 */:element{	--link-color:#06c;	--Link-color:#66c;}

变量值可以接受任何符合语法的值,它的默认值为" ",但是不能为"",否则会报错。

变量的继承和覆盖

变量的声明和使用遵循CSS的层叠特性,类似于普通编程语言里面的变量作用域。请看下面的代码。

:root { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }<p>I inherited blue from the root element!</p><div>I got green set directly on me!</div><div id='alert'>  While I got red set directly on me!  <p>I’m red too, because of inheritance!</p></div>

使用变量

我们可以通过var()的方式使用变量,但是不能在属性名、选择器中使用变量,只能在属性值中使用变量,使用变量的语法如下所示。

/*  * var()接受两个参数,自定义属性名(变量名)、缺省值 * 第一个参数custom-property-name调用变量 * 第二参数可选,指定自定义变量无效时的缺省值。 */var() = var( <custom-property-name> [, <any-value> ]? )/* for example *//* In the component’s style: */.component .header {  color: var(--header-color, blue);}.component .text {  color: var(--text-color, black);}/* In the larger application’s style: */.component {  --text-color: #080;  /* header-color isn’t set,     and so remains blue,     the fallback value */}

我们可以嵌套调用CSS变量。

/*one example */:root {  --main-color: #c06;  --accent-background: linear-gradient(to top, var(--main-color), white);}/*another example */<one><two><three /></two></one>one   { --foo: 10px; }two   { --bar: calc(var(--foo) + 10px); }three { --foo: calc(var(--bar) + 10px); }

兼容并包

对于前端开发者来说,兼容并包永远是一个难以企及的痛,作为一个具有“极客思维”的前端er,我们还是要努力。
首先来看看,CSS变量目前的惨不忍睹的兼容性,如下图所示,数据来自caniuse。

全线飘红有木有,只有firefox认识,还怎么玩。
有兄弟说,我就要任性,就要玩怎么办?老外写了个补丁(polyfill),大家不妨一试。

只求甚解

综上所述,CSS变量处于草案阶段,浏览器兼容一般,今天写这篇文章仅为开阔视野,储备知识之用。商用还请大家使用Sass或LESS等预处理器。
如欲了解更多详情,使用下面的列表乃求甚解。

  • W3C reference
  • MDN info
  • caniuse
  • 致谢

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

    文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

    &lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?Apr 28, 2025 pm 05:43 PM

    本文讨论了Lt; Head&gt; &&lt;身体&gt; HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

    &lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?Apr 28, 2025 pm 05:42 PM

    本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

    请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

    文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

    HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

    本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

    HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

    本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

    HTML中的'类”属性是什么?HTML中的'类”属性是什么?Apr 28, 2025 pm 05:37 PM

    本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用,将其与唯一的“ ID”属性进行对比。

    HTML中有哪些不同类型的列表?HTML中有哪些不同类型的列表?Apr 28, 2025 pm 05:36 PM

    文章讨论了html列表类型:订购(&lt; ol&gt;),无序(&lt; ul&gt;)和描述(&lt; dl&gt;)。专注于创建和样式列表以增强网站设计。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

    安全考试浏览器

    安全考试浏览器

    Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    将Eclipse与SAP NetWeaver应用服务器集成。