CSS4
今天看到@Dennis Gaebel 分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整 CSS,但从新特性的发掘和敏锐性就差十万八千里。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
不吐槽了,还是回到正题来吧。
众所周知,CSS 是不具备类似其他程序语言一样的特性,没有逻辑性而言。他就是一门描述性语言(暂时把她称作语言吧)。因此才会有各式各样的 CSS 处理器出来,比如较为流行的 Sass,LESS 和 Stylus。当然还有近年最强大的 PostCSS,在项目中使用 PostCSS 能将你带入到一个全新的 CSS 世界,至于原因是什么,暂且不在这里阐述。
使用过 CSS 处理器的同学应该知道,在 CSS 处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。经过多年的沉淀,这些特性开始尝试在 CSS 中使用。比如下面我们将要说的几个特性,就是 CSS 自身已具备或将要具备的类似于 CSS 处理器的特性。
变量
变量是 CSS 处理器最基本的特性之一,它能类似于其他的程序语言一样。通过变量让我们的代码变得更好维护和管理。比如说给项目定制多道主题之时,变量特性就显得很强。
对于 CSS 自身而言,他承接 CSS 处理器众多特性之一变量。只是使用的方式略有差别,咱们先来看 Sass 中的变量声明方式和调用方式:
$spacing-unit: 20px; main { margin: $spacing-unit; padding: $spacing-unit; }
在 Sass 中通过$
声明一个变量。在 CSS 中是这样来声明变量的:
:root { --primary-color: skyblue; } nav.primary { background: var(--primary-color); }
从上面的代码中可以看出。在 CSS 中是通过前缀--
来声明一个变量,如果将变量放置在:root
中,代表其声明的是一个全局变量,如果将其放置在某个 CSS 代码块中,表示声明的局部变量。使用的时候,借助var()
函数来调用已声明的变量。在var()
函数中可以接受两个参数:
div { color: var(--my-var, red); }
第一个参数代表变量名,第二个参数指变量的默认值。也就是说,如果未显式的声明--my-var
这个变量,那么通过var()
临时声明了这个变量,而且这个变量的值是red
。
到整理这篇文章之时,CSS 变量得到了众多主流浏览器的支持,而且使用的场景也特别的多,比如在动画中。这里只是简单的介绍了一下 CSS 变量的简单使用,有关于这方面的详细介绍,可以阅读早前整理的相关文章。
混合宏
在 CSS 处理器中另一个特性就是混合宏。混合宏最强的特性就是可以方便你引用一个代码块。同样的我们先来看 Sass 中的混合宏。
在 Sass 中通过@mixin
关键词来声明一个混合宏,然后通过@include
来调用已声明的混合宏:
@mixin font-size($size, $base) { font-size: $size; font-size: ($size / $base) * 1rem; } body { @include font-size(14, 16); }
这段代码编译出来的 CSS:
body { font-size: 14px; font-size: .875rem; }
上面创建了一个font-size
的混合宏,并且给这个混合宏传递了两个参数$size
和$base
。而这个混合宏的功能就是计算font-size
的值。让不支持rem
的浏览器采用px
作为单位值,对于支持rem
的浏览器采用rem
的单位值。
而 CSS 中同样可以有混合宏的特性,只不过现在支持的浏览器很少,仅在 Chrome 浏览器中。而且还需要开启 Chrome 浏览器相关配置:
咱们假设你的 Chrome 浏览器已根据上图的显示一样配置好了相关设置(把chrome://flags/#enable-experimental-web-platform-features
复制到浏览器 URL 地址栏),接下来咱们看怎么声明和调用声明好的混合宏:
:root { --pink-theme: { background: #f64778; } } body { @apply --pink-theme; }
编译出来的 CSS:
body { background: #f64778; }
CSS 的混合宏声明有点类似于变量的声明,只不过在里他是一个代码块,然后使用@apply
规则(类似于 Sass 中的@include
关键词)调用已声明好的混合宏。
运算
在 CSS 处理器中可以进行简单的一些数学运算,比如说加减乘除之类。那么在 CSS 中其实也有类似的计算功能。此时,我想大家应该马上想到了calc()
函数。如此说来,这个也算是 CSS 带有的 CSS 处理器特性之一的话,那它比 CSS 变量特性还要更早。我想大家应该也在项目中或多或少的使用过:
nav { margin: calc(1rem - 2px) calc(1rem - 1px); }
这里咱们看不出计算出来的值是多少,其实浏览器会自动根据表达式计算出其值。特别是 CSS 具有变量的特性之后,calc()
使用的越来越频繁。
.colorful { --translation: 10; transform: translateX(calc(var(--translation) * 1vw)) translateY(calc(var(--translation) * 1vh)); filter: hue-rotate(calc(var(--translation) * 4.5deg)); will-change: transform, filter; transition: transform 5000ms ease-in-out, filter 5000ms linear; }
嵌套
我想大家使用 CSS 处理器嵌套的时候,应该感觉到了非常的爽。当然嵌套要是没用好,反而得到不佳的效果。我看到过有同学无限层次的嵌套,结果编译出来的 CSS 简值无法让人接受。
同样的,先来看 Sass 的嵌套:
ul { margin: 20px auto; li { font-size: 12px; } a { text-decoration: none; } }
我想,大家也希望能在 CSS 中具备类似的嵌套特性吧。@Tab Atkins 提出过 CSS 原生的嵌套。CSS 的嵌套其实将有可能类似于 Sass 这样的嵌套。只不过 Sass 需要编译,而 CSS 的嵌套不需要编译就能直接被浏览器识别渲染。
不过大家要注意,不管是 CSS 的处理器,还是 CSS 自身即将具备的嵌套功能,在使用的时候都需要注意。因为使用嵌套是有风险的,建议任何嵌套不要超过三级。当然,在 Sass 中可以通过@at-root
跳出嵌套,或者通过自定义的函数也能实现跳出嵌套。在此也希望在 CSS 的嵌套中也能具备类似的特性,如果一来,为了维护更好的代码块,就算是嵌套层级深,也能跳出层级关系。只不过话说回来,CSS 嵌套不需要编译,提供如此特性似乎又有点多余了。(我自己在 YY 而以)。
扩展
在 Sass 中可以使用@extend
扩展已声明的任何类代码块或者通过%
声明的占位符:
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }
上面的代码编译出来是什么我想大家都知道了。不同状态继承了.message
的基本样式,只不过在不同的状态重置了border-color
。
同样的,到目前为止还没有任何浏览器支持类似 Sass 这样的扩展规则特性。但@Tab Atkins 已提出相关的建议。或许有一天,CSS 的扩展规则也类似于 Sass 中的扩展规则。
颜色函数
CSS 处理器提供了很多个颜色函数。可能通过这些函数计算出颜色新值。在 CSS 中,也将具备这方面的特性。@Erik Jung 写了一篇文章来介绍 CSS Color Module Level 4 特性。介绍color-mod()
函数来计算颜色。另外@Ahmad Shadeed 分享了如何使用rgba()
模拟出color-mod()
函数特性。
更为强大的是,@Tyler Gaw 使用 React 写的 ColorMe,演示了color-mod()
函数如何基于一个颜色,在不同条件下的变化。
下面代码简单演示了color-mod()
函数的使用方式:
nav { background: color-mod(#79d3e2 hue(360) saturation(100%)); }
代码具体代表什么意思,如果你感兴趣的话,可以阅读《使用color-mod()
函数修改颜色》一文。
总结
从使用多年 CSS 处理器经验来说,CSS 处理器的确帮助我解决了很多问题,也让自己编码效率得到提高。如果能将 CSS 处理这些优秀的特性移植到 CSS 规范中来,而不需要工具来编译的话,我们会更喜欢。当然这些 CSS 处理器的发展给 CSS 规范提供新思想和方法。
最后我希望向大家呈现这些新特性,能激发你在自己的工作中使用它们,并且在使用过程中发现其中不足之处,并把相关建议提供给 CSS 的规范小组,让 CSS 变得越来越强大,越来越好使。
【注:本文源自网络文章资源,由站长整理发布】