CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

使用语法

首先我们先来看一个例子:
html代码:

<div class="element">这是一段文字</div>

css代码:

.element {
  width:200px;
  height:
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

实现效果:

结果是该DOM元素背景变成了黑色。

CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:

:root{
    --main-bg-color: #000;
}
.element {
    background-color: var(--main-bg-color);
}

注意:变量名称不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文,例如:


  --黑色: var(--黑色);
}

css变量完整语法:
CSS变量使用的完整语法为:var( [,]? ),用中文表示就是:var( <自定义属性名> [,<默认值 ]? ),也即是如果我们没有定义变量名称,那么就会使用后面的值作为其默认属性值。
如下:

 var(--new-bg-color,#EE0000);
}

得到的结果当然是后面颜色的值的背景。

我们来看一下如果变量名称不合法会出现什么结果,看下面例子:

body {
  --color: 20px; #369; var(--color,#cd0000);
}

请问,此时<body>的背景色是?

  • A. transparent
  • B. 20px
  • C. #369
  • D. #cd0000

答案是:A. transparent
CSS变量中,果发现变量值是不合法的,例如上面背景色显然不能是20px,则使用背景色的缺省值,也就是默认值代替,于是,上面CSS等同于:


    --color: transparent;
}

css变量在js中的应用

看如下例子,html代码:

id="jsDom"#jsDom {
    --my-varwidth: 200px;
    color:
    width:var(--my-varwidth);
    height:200px;
}

js代码:

var element = document.getElementById('jsDom');
var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px

设置过后该DOM元素的宽度变为了300px
element.style.setProperty("--my-varwidth",'300px');

如果样式是写到行间呢?那么进行如下操作:
html代码:

="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">

js代码:

var curWidth = element.style.getPropertyValue("--my-varwidth"400px

浏览器兼容

浏览器的兼容如图所示:

到目前位置IE11也不支持该css变量。

说到这儿感觉这个css变量也是很强大的,那么它跟预处理器比较,你觉得哪个更好?下面讲一下预处理器的劣势。

预处理器劣势

预处理器变量不是实时的

也许令新手惊讶的是,预处理器局限性最常见的情况是Sass无法在媒体查询中定义变量或使用@extend。

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

上面代码将编译为:

.Container { 1em;
 }

上面结果可以看出来,媒体查询块被丢弃,变量赋值被忽略。

由于无法在匹配@media规则的基础上改变变量,所以唯一的选择是为每个媒体查询分配一个唯一的变量,并单独编写每个变体。

预处理器变量不能级联

每当使用变量,作用域的问题就不可避免的出现。这个变量应该设置为全局变量吗?是否应该限定其范围为文件或模块?是否应该限制在块中?

由于CSS最终目的是为HTML添加样式,事实证明还有另一种有效的方法给变量限定作用域:DOM元素。但由于预处理器不在浏览器中运行并且无法看到标记,它们不能这样做。

假设有一个网站,面对偏好较大文字的用户,就向<html>元素添加类user-setting-large-text。当设置了这个类时,应当应用较大的$font-size变量赋值:

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} 
body { 
    font-size: $font-size; 
}

但同样,就像上面的媒体块示例,Sass完全忽略了该变量的赋值,这意味着这是不可能发生的。编译后的代码如下:

 1em;
}

预处理器变量不继承

虽然继承严格说来是级联的一部分,之所以把它单独分出来讲,是因为多次想调用这个特性却不得。

假设一种情况,要在DOM元素上基于其父元素应用的颜色而设置样式:

.alert { lightyellow;
}
.alert.info { lightblue;
}
.alert.error { orangered;
}

.alert button {
    border-color: darken(background-color,25%);
}

上面的代码并不是有效的Sass(或CSS),但你应该明白它想达到什么目的。

最后一句声明试图在<button>元素从父元素.alert元素继承的background-color属性使用Sassdarken函数。如果类infoerror已经加在了.alert上(或如果background-color已通过JavaScript或用户样式设置),button元素能据此作出相应的响应。

显然这在Sass中行不通,因为预处理器不知道DOM结构,但希望你清楚的认识到为什么这类东西是有用的。

调用一个特定的用例:出于可访问性的原因,在继承了DOM属性上运行颜色函数是极其方便的。例如,确保文本始终可读,并充分与背景颜色形成鲜明对比。 有了自定义属性和新的CSS颜色函数,很快这将成为可能。

预处理器变量不可互操作

这是预处理器相对明显的一个缺点,提到它是因为我觉得它重要。如果你正使用PostCSS来构建网站,想使用只能通过Sass实现主题化的第三方组件,那你真是不走运了。

跨不同的工具集或CDN上托管的第三方样式表共享预处理器变量是不可能(或至少不容易)的。

原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用。反之则不然。

下面给一个css变量在媒体查询中的使用:

:root {
    --gutter:

@media (min-width: 30em) {
    :root {
        --gutter: 2em;
    }
}
@media (min-width: 48em) {
    :root {
        --gutter: 3em;
    }
}

如果是预处理器这样写就无效了。

实例:CSS变量让你轻松制作响应式网页

html代码:

h1>这是标题>
="warpper">
    ="item item1">1="item item2">2="item item3">3="item item4">4html,body{padding:0;margin:0;}
:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
  }
}

h1 {
  font-size: var(--base-font-size);
  margin: var(--base-margin) ;
}
.warpper {
  display: grid; var(--base-margin) ;
  grid-template-columns: var(--columns);
}
.item{text-align: center;font-size:20px;color:height:40px;line-height: 40px;}
.item1{background:#acf4b6;}
.item2{#ffe975;}
.item3{#5efffa;}
.item4{#e6b4fd;}

实现效果,如果宽度超过450px,如图所示:

如果宽度小于450px,如图所示:

参考

Using CSS custom properties (variables)
小tips:了解CSS/CSS3原生变量var
我为什么对原生CSS变量感到兴奋

[翻译]CSS变量让你轻松制作响应式网页

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法