CSS变量，又称——CSS自定义属性，现在很多CSS预处理/后处理程序已作了相关快捷的编译处理，

基本用法有哪些呢，我们先看一个简单的栗子；——要求，创建一个五个块元素居中的分栏样式，奇数和偶数同高不同宽。

先看效果：

上菜一：

html：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>CSS变量的设置</title>

        <!--样式初始化————normalize 等同于reset.css-->

        <link rel="stylesheet" type="text/css" href="css/normalize.css" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />

    </head>

    <body>

        <!--快速创建列表-->

        <!--ul[class="wrap"]>li[id="a$"]{块$}*5-->

        <ul class="wrap">

            <li id="a1">块1</li>

            <li id="a2">块2</li>

            <li id="a3">块3</li>

            <li id="a4">块4</li>

            <li id="a5">块5</li>

        </ul>

    </body>

</html>

上硬菜：

css：

body {

    width: 100%;

    font-size: 20px;

}

:root {

    --w1: 10rem;

    --w2: 15rem;

    --R: red;

    --G: green;

    --W: #ffffff;

    --Gr: grey;

    --position: center;

    --b: 1px solid #000;

}

.wrap {

    font-size: 0px;

    width: 100%;

    height: auto;

    text-align: var(--position);

}

.wrap li {

    color: var(--W);

    vertical-align: middle;

    display: inline-block;

    --a: calc(var(--w2) + var(--w1));

    height: calc( var(--a)*2.5);

    line-height:calc( var(--a)*2.5);

    border: var(--b);

}

li:nth-child(odd) {

    font-size: 2rem;

    width: var(--w1);

    background-color: var(--R);

}

li:nth-child(even) {

    font-size: 3rem;

    width: var(--w2);

    background-color: var(--G);

}

由“菜一”可以看出，css变量的用法，基本普通html代码编译方式一样，采用css引入方式，由“硬菜”可以看出，变量的用法，也就是类似于rem的用法，不过可以随意设置前缀为“--”（双短杠）的任意变量名，同时可以配合rem，百分比，px等来使用

所以优点显而易见：

1.一次设置，多次调用，且调用对象不限，id=a的元素可以用，id=b的元素也可以用；

2.调试时，可以将相同的设置的元素，同时修改样式，快捷方便

不过也有部分不足：

1.当同一样式的元素，需要修改为不同的样式时候，必须删除变量或者另增加变量，盲目修改变量参数，会引起引用同一变量的其他元素样式变化，不利于元素的“个性化”调试；

2.变量命名，区分大小写，--a和--A是不同的变量，类似js规则，而且“--”必须前置，注意的细节较多

而且现在有很多css预编译工具，Less、SaSS等都带有此类功能，不过此处，我们只做原生的原理性用法的基本探究。

相关链接：

normalize.css：  http://necolas.github.io/normalize.css/

css变量学习：https://www.w3cplus.com/css3/css-properties-in-depth.html?utm_source=tuicool&utm_medium=referral

css变量的用法——(--cssName)的更多相关文章

  1. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

  2. 【译】巧用CSS变量实现自动前缀

    转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...

  3. CSS变量实用指南及注意事项

    近年来,一些动态特性已经开始成为 CSS 语言本身的一部分. CSS变量 – 官方的术语为 "自定义属性" – 已经已经加入规范并且具有很好的浏览器支持,而 CSS mixins ...

  4. 多种CSS变量技术 带入进入老司机行业

    CSS 变量技术 具体用法 使用 -- 声明变量,使用 var() 函数获取变量. :root{ --header-height: 70px; } body { --color: white; } . ...

  5. css变量复用 全局变量-局部变量

    前言 简单使用场景:同一套后台系统有多套主题的情况下,主题色作为一个最常用到的可复用的颜色,非常有必要像js的全局变量一样存在全局变量中以作复用,之前我第一个想到的是sass的变量声明,未曾想到css ...

  6. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  7. Robot Framework--08 List Variables-List变量及其用法

    转自:http://blog.csdn.net/tulituqi/article/details/7907981 一.List变量及其用法 在我们前面几篇文章里用到了很多List变量,相信以后各位也会 ...

  8. 格式与布局 CSS阴影效果(Box-shadow)用法

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  9. 第一个CSS变量：currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

随机推荐

  1. bzoj 4918: 回文数对

    传送门 Description 给定区间[L,R],请统计有多少对整数A,B(L<=A,B<=R)满足A xor B的值在二进制表示下,去掉所有前导0后是回文串 Input 第一行包含一个 ...

  2. BZOJ:1443: [JSOI2009]游戏Game

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1443 反正不看题解我是完全想不出系列…… 先把棋盘黑白染色,也就是同一对角线上颜色相同,使 ...

  3. POJ1635:Subway tree systems

    链接:http://poj.org/problem?id=1635 填坑树同构 题目给出的是除根外的括号序列表示. 其实只要跟你说hash大家都能写得出来…… hash函数取个效果别太差的就行了吧 # ...

  4. [bzoj1969] [Ahoi2005]LANE 航线规划

    tarjan.并查集.树状数组.树链剖分. 时间倒流,变删边为加边. 先求一波边双联通分量,缩点. 题目保证最后还是整张图联通的..所以就是一棵树. 现在的操作就是,将路径上的边权置0(加边时),查询 ...

  5. Digit Generator（水）

    题目链接:http://acm.tju.edu.cn/toj/showp2502.html2502.   Digit Generator Time Limit: 1.0 Seconds   Memor ...

  6. python笔记一（正则表达式）

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 1 如果直接给出字符,则表示精确匹配 # 2 \d 表示数字, \w 表示字母或数字, . 可以匹配任意 ...

  7. i++是否原子操作？并解释为什么？

    都不是原子操作.理由: 1.i++分为三个阶段: 内存到寄存器寄存器自增写回内存这三个阶段中间都可以被中断分离开.  2.++i首先要看编译器是怎么编译的, 某些编译器比如VC在非优化版本中会编译为以 ...

  8. [学习OpenCV攻略][016][RedHat下安装OpenCV]

    安装环境 操作系统: Red Hat Enterprise Linux Server 6.3 相关软件: ffmpeg-0.8.15.tar.bz2.cmake-3.5.1.tar.gz.OpenCV ...

  9. [国嵌攻略][054][NandFlash驱动设计_写]

    Nand Flash支持按页写和随机写两种方式,在下面实现的是按页写.闪存在写数据时,只能写入1,不能写入0,所以写函数必须和擦除函数一起使用,并且擦除函数是按块擦除. /************** ...

  10. Docker+Jenkins持续集成环境（3）集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果

    为了规范代码,我们一般会集成静态代码检测工具,比如PMD.FindBugs.Checkstyle,那么Jenkins如何集成这些检查工具,并把检查结果放到构建邮件里呢? 今天做了调研和实现,过程如下 ...