css变量的用法——(--cssName)
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)的更多相关文章
- CSS变量variable
前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...
- 【译】巧用CSS变量实现自动前缀
转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...
- CSS变量实用指南及注意事项
近年来,一些动态特性已经开始成为 CSS 语言本身的一部分. CSS变量 – 官方的术语为 "自定义属性" – 已经已经加入规范并且具有很好的浏览器支持,而 CSS mixins ...
- 多种CSS变量技术 带入进入老司机行业
CSS 变量技术 具体用法 使用 -- 声明变量,使用 var() 函数获取变量. :root{ --header-height: 70px; } body { --color: white; } . ...
- css变量复用 全局变量-局部变量
前言 简单使用场景:同一套后台系统有多套主题的情况下,主题色作为一个最常用到的可复用的颜色,非常有必要像js的全局变量一样存在全局变量中以作复用,之前我第一个想到的是sass的变量声明,未曾想到css ...
- 引人瞩目的 CSS 变量（CSS Variable）
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- Robot Framework--08 List Variables-List变量及其用法
转自:http://blog.csdn.net/tulituqi/article/details/7907981 一.List变量及其用法 在我们前面几篇文章里用到了很多List变量,相信以后各位也会 ...
- 格式与布局 CSS阴影效果(Box-shadow)用法
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...
- 第一个CSS变量：currentColor
一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...
随机推荐
- GDOI 2016 & APIO 2016 游记
缓慢施工中...... UPD:APIO游记已烂尾......因为Cu滚粗+生病一直没心情写..过了几天就发现APIO的事都快忘光了...去看KPM的就可以啦 今年apio竟然没和gdoi撞...智障 ...
- 数位dp初探
我这种蒟蒻就一直不会写数位dp.. 于是开了个坑.. 1833: [ZJOI2010]count 数字计数 这道被KPM大爷说是入门题..嗯似乎找找规律然后减掉0的情况后乱搞就可以了..(但是还是写了 ...
- 将数据按照gzip当时解压的工具类
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; impo ...
- Responder Pro new version could analyze Win10 memory dump
My friend John acquired a memory dump from Windows 10, but he could analyze this memory dump with an ...
- iptables命令 高级网络
http://man.linuxde.net/iptables iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分.可以直接配置,也可以通过许多前端和图形界面配置. ...
- Linux中rpm命令用法听语音
rpm 是红帽(RedHat)软件包管理工具,实现类似于 Windows 中的添加/删除程序功能.下面,就来向大家介绍 rpm 命令的用法. 工具/原料 CentOS 一.rpm常用参数 1 rpm ...
- DEDE中如何过滤掉Html标签，并且截取字符串长度
在dede标签中只要使用2个函数就可以. [field:body function="cn_substr(Html2text(@me),80)"/] Html2text()函数是去 ...
- HTML meta refresh 刷新与跳转(重定向)页面
下面为各位整理了一些HTML meta refresh 刷新与跳转(重定向)页面的例子吧,后面本站长自己也补充了一些js页面刷新与跳转例子吧. refresh 属性值 -- 刷新与跳转(重定向)页 ...
- asp.net -mvc框架复习（11）-基于三层架构与MVC实现完整的用户登录
一.先从M部分写起(Modles\DAL\BLL) 1.Modles 实体类:上次实体类已经搞定. 2.DAL 数据访问类类 (1)通用数据数据访问类: A: 先编写数据连接字符串,写到网站根目录W ...
- 再叙ASM
上一篇文章,我们已体验到ASM的威力,那么结合上面的代码解释ASM是怎么执行的. ClassWriter clazzWriter = new ClassWriter(0); 首先看下官方文档对Clas ...