最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。

目前对应的规范为 -- CSS Nesting Module

随着 CSS 自定义属性(CSS Variable)的大规模兼容,到如今 CSS 即将支持嵌套,一些预处理器的核心功能已经被 CSS 原生支持,这是否表示 SASS/LESS 等预处理器已无用武之地?即将被淘汰了?

规范的几个阶段

首先简单介绍一下,一个规范从提出到落地,会经历的一些阶段:

  1. 编辑草案 Editor's Draft (ED)
  2. 工作草案 Working Draft (WD)
  3. 过渡-最后通告工作草案 Transition – Last Call Working Draft (LCWD)
  4. 候选推荐标准 Candidate Recommendation (CR)
  5. 过渡-建议推荐标准 Transition – Proposed Recommendations (PR)
  6. 推荐标准 Recommendation (REC)

上文说的,即将进入 FPWD,只是处于规范的第 2 个阶段 WD 阶段,FPWD 表示第一次公开工作草案( First Public Working Draft (FPWD))。FPWD 后面还会有数个工作草案,会处理来自 CSSWG 内部和小组外部更广泛社会的反馈。完善规范的设计。

也就是说,目前来看,即便后面的流程顺利,要等到浏览器大范围实现该规范到能落地的那天还有非常长一段时间。

除此之外,我觉得 SASS\LESS 等预处理器还有一些比较有意思的功能(函数),是即便原生 CSS 支持了自定义属性和嵌套之后依旧欠缺的,我简单罗列罗列我的看法。

for() 循环函数

目前,原生 CSS 依旧不支持循环函数。

但是其实在预处理器中,循环还算是比较常用的一个功能。考虑下面这种布局:

ul 下面有多个 li,每个 li 的高度递增 20px,一个一个写当然也可以,但是有了循环其实能极大减少工作量:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

如果没有预处理器,我们的 CSS 可能是这样的:

ul {
display: flex;
align-items: baseline;
justify-content: space-between;
}
li {
width: 50px;
background: #000;
}
li:nth-child(1) {
height: 20px;
}
li:nth-child(2) {
height: 40px;
}
// ... 3~9
li:nth-child(10) {
height: 200px;
}

如果利用 SASS 预处理器,可以简化成:

ul {
display: flex;
align-items: baseline;
justify-content: space-between;
}
li {
width: 50px;
background: #000;
}
@for $i from 1 through 10 {
li:nth-child(#{$i}) {
height: calc(#{$i} * 20px);
}
}

当然,除此之外,在非常多的复杂 CSS 动画效果中,循环是非常非常常用的功能。

譬如一些粒子动画,我们通常可能需要去操纵 50~100 个粒子,也就是 50~100 个 div 的样式,甚至更多,如果没有循环,一个一个去写效率会大打折扣。

利用预处理器循环功能实现的一些效果展示

下面我简单罗列一些我实现过的,运用到了 CSS 预处理器循环功能的动画效果。

像上面这个使用纯 CSS 实现的火焰效果,其中的火焰的动态燃烧效果。其实是通过大量的细微粒子的运动,配合滤镜实现。

其中使用到了 SASS 的循环函数的片段:

@for $i from 1 to 200 {
.g-ball:nth-child(#{$i}) {
$width: #{random(50)}px; width: $width;
height: $width;
left: calc(#{(random(70))}px - 55px);
} .g-ball:nth-child(#{$i}) {
animation: movetop 1s linear -#{random(3000)/1000}s infinite;
}
}

嗯哼,上面的循环是循环了 200 次之多,如果真要一个一个写,工作量还是非常巨大的。上述效果的完整代码,你可以戳这里:

CodePen Demo -- CSS Candles

if() 条件语句

接下来一个就是 if() 条件语句。

其实,CSS 中有一类非常类似条件语句的写法,也就是媒体查询 @media 以及 特性检测 @supports 语句,目前 CSS 中支持的类似条件选择的一些写法如下:

@support 条件语句

CSS @supports 通过 CSS 语法来实现特性检测,并在内部 CSS 区块中写入如果特性检测通过希望实现的 CSS 语句。

div {
position:fixed;
} @supports (position:sticky) {
div {
position:sticky;
}
}

上述 CSS 语句的意思是如果客户端支持 position:sticky,则采用 position:sticky,否则,就是 position:fixed

关于 CSS 特性检测的深入讲解,你可以看看我的这篇文章:深入探讨 CSS 特性检测 @supports 与 Modernizr

@media 条件语句

另外一种常见的条件语句就是媒体查询,这个大家还是比较熟悉的。

如果当前设备满足一种什么条件,则怎么样怎么样。

article {
padding: 4rem;
}
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}

嗯,并且,上述的两种条件语句可以互相嵌套使用:

@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}

不过,上述两种毕竟不是严格意义上的我们期待的 if() 语句。

很久之前,社区就有声音(css-values - if() function),提议 CSS 规范中实现 if() 条件语句,类似于这样:

.foo {
--calc: calc(10 * (1vw + 1vh) / 2);
font-size: if(var(--calc) < 12px, 12px, var(--calc));
}

可以看到这一语句 if(var(--calc) < 12px, 12px, var(--calc)) 类似于一个三元语句,还是比较好理解的。

然而,上述的条件语句一直没得到支持的原因,在 scss-values - if() function 可以略窥一二。

原因是 CSS 一直在尽量避免在属性当中产生任意依赖。在 CSS 中,属性之间本身存在一些隐式依赖,譬如 em 单位长度受到父元素的 font-size 的影响,如果作者能够添加任意依赖关系(通过 if() 条件语句),那么将会导致一些问题。

原文是:this, unfortunately, means we're adding arbitrary dependencies between properties, something we've avoided doing so far because it's, in general, unresolvable.

Custom properties can arbitrarily refer to each other, but they're limited in what they can do, and have a somewhat reasonable "just become invalid" behavior when we notice a cycle. Cycles are more difficult to determine for arbitrary CSS, and can happen much more easily, because there are a number of existing, implicit between-property dependencies. For example, anything that takes a length relies on font-size (due to em), and so you can't have a value in font-size that refers to a property that takes a length (so no adjusting font-size to scale with width!). We add new dependencies of this sort over time (such as adding the lh unit, which induces a dependency on line-height); if authors could add arbitrary dependencies, we'd be unable to add new implicit ones for fear of breaking existing content (by forming cycles that were previous valid and non-cyclic).

所以,CSS 中的直接 if() 语句一直没有得到实现。

SASS 等预处理器中的 if() 语句

最后,我们来看看预处理器中对 if() 的运用,由于 SASS 等预处理器最终还是要编译成 CSS 文件,所以 if() 其实并不太常用。因为 SASS 中的 if() 也无法实现类似上述说的 font-size: if(var(--calc) < 12px, 12px, var(--calc)) 这种功能。

在 SASS 中,我认为最常用的 if() 可能也就是这种场景:

@mixin triangle($size, $color, $direction) {
height: 0;
width: 0; border-color: transparent;
border-style: solid;
border-width: $size; @if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
} @else {
@error "Unknown direction #{$direction}.";
}
} .next {
@include triangle(5px, black, right);
}

上述代码是对 CSS 实现三角形的一个封装,通过传入的参数,实现不同方向、颜色、大小的三角形。也就是预处理器中 if() ,更多的完成一些函数功能的封装,方便复用。

实际上述的代码会被编译成:

.next {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: 5px;
border-left-color: black;
}

Random() 随机函数

OK,接下来这个是随机函数,是我个人在 SASS 等预处理器中最常用的一个函数。目前原生 CSS 不支持任意形式的随机。

在 CSS 动画效果中,非常多的因素我们不希望是一成不变的,我们希望的是,一些属性的值的产生由我们设定一个基础规则,一个范围中得到,这样每次刷新都能产生不同的效果。

最常见的莫过于不同的颜色、不同的长度、不同的数量等等等等。

譬如下面这个使用 CSS 实现的效果:夏日夕阳图

我们通过随机,每次刷新都可以得到高度/宽度不一样,位置不一样的 div 块,利用随机的特性,绘制一幅幅不一样的效果图:

DEMO -- 夏日夕阳图

目前原生 CSS 不支持任意形式的随机。使用预处理器,也只能是在编译前编写随机函数,SASS 中比较常用的随机函数的一些写法:

$r: random(100);

random() 是 SASS 支持的一种函数,上述 $r 就能得到一个 0 ~ 100 的随机整数。

利用 random(),就能封装出各种随机函数,譬如随机颜色:

@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
} @function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
} div {
background: randomColor();
}

关于原生 CSS 实现 random() 的一些思考

下面这个是社区对原生 CSS 实现 random() 函数的一些思考,感兴趣的可以猛击:

[css-values] random() function

简单搬运其中一些比较有意思的观点。

假设 CSS 原生实现了 random() 函数,譬如下述这个写法:

<p class="foo">123</p>
<p class="foo">456</p>
<p class="foo">789</p>
.foo:hover {
color: rgb(random(0, 255), 0, 0);
}

假设其中 ramdom() 是原生 CSS 实现的随机函数,有一些事情是需要被解决或者得到大家的认可的:

  1. random(0, 255) 的值在什么时候被确定,是在每一次 CSS 解析时,还是每一次被应用触发时?
  2. 对于上述 DEMO,3 个 .foocolor 值是否一样?
  3. 对于反复的 hover,取消 hover 状态,random(0, 255) 的值是否会发生变化?

上述的问题可以归结于如果 CSS 原生支持随机,随机值的持久化和更新是必须要解决的问题。总之,目前看来,未来 CSS 原生支持随机的可能性还是很大的。

工具函数:颜色函数、数学函数

最后,我们再来看看一些有意思的工具函数。目前原生 CSS 暂时不支持一些比较复杂的颜色函数和数学函数。但是预处理器都带有这些函数。

在我之前的一篇关于阴影的文章中 -- 你所不知道的 CSS 阴影技巧与细节,介绍过一种利用多重阴影实现立体阴影的效果,譬如我们要实现下面这个效果:

其中的阴影的颜色变化就借助了 SASS 的颜色函数

  • fade-out 改变颜色的透明度,让颜色更加透明
  • desaturate 改变颜色的饱和度值,让颜色更少的饱和
@function makelongrightshadow($color) {
$val: 0px 0px $color; @for $i from 1 through 50 {
$color: fade-out(desaturate($color, 1%), .02);
$val: #{$val}, #{$i}px #{$i}px #{$color};
} @return $val;
} p{
text-shadow: makelongrightshadow(hsla(14, 100%, 30%, 1));
}

当然,除了上述的两个颜色函数,SASS 还提供了非常多类似的颜色相关的函数,可以看看这里:Sass基础—颜色函数

除了颜色,数学函数也是经常在 CSS 效果中会需要用到的。

我在这篇文章中 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画,专门讲了如何利用 SASS 等预处理器实现三角函数,以实现曲线线条,实现一些有意思的效果,像是这样:

当然,目前 SASS 也不支持三角函数,但是我们可以利用 SASS function,实现一套三角函数代码:

@function fact($number) {
$value: 1;
@if $number>0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
} @function pow($number, $exp) {
$value: 1;
@if $exp>0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
} @function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
@if $unit==deg {
$unitless: $unitless / 180 * pi();
}
@return $unitless;
} @function pi() {
@return 3.14159265359;
} @function sin($angle) {
$sin: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 20 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
@return $sin;
} @function cos($angle) {
$cos: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 20 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
}
@return $cos;
} @function tan($angle) {
@return sin($angle) / cos($angle);
}

就目前原生 CSS 而言,在数学函数等方面其实已经做出了非常多的努力,譬如:

  • 基础运算函数 calc()
  • 比较函数 max()min()clamp()

等兼容性已经逐渐铺开,可以开始大规模使用,而类似于

  • 指数函数 pow()sqrt()hypot()log()exp()
  • 三角函数 sin()con()tan()
  • 阶梯函数 round()mod()rem()

也在规范 CSS Values and Units Module Level 4 中被提及定义,相信不久的将来也会逐渐落地。

关于社区对数学函数的一些讨论,感兴趣的也可以看看这里:Mathematical Expressions

总结一下

好了,综上总结一下,就目前而言,我觉得 SASS/LESS 等预处理器在很多方面还是有有用武之地的,在上述的一些功能原生 CSS 没有完全落地之前,预处理器能一定程度上弥补 CSS 的不足。

并且,除去上述说的一些我个人认为比较重要有意思的功能、函数之外,预处理器其它一些核心功能,譬如 extend、mixins 等也能有效的提升开发时的效率。

所以,在未来的一段时间内,我认为预处理器还是能和 CSS 友好共存~

最后

好了,本文到此结束,希望对你有帮助

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?的更多相关文章

  1. Vue-cli 3.0 使用Sass Scss Less预处理器

    项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...

  2. CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS

    一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...

  3. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

  4. Sass预处理器

    CSS预处理器 less,sass和stylus sass:较早,缩进风格 scss:完全兼容css3,使用大括号 编写css的编程语言,引入变量,函数,重复代码等功能,如果编译成css文件 Sass ...

  5. 初识css预处理器:Sass、LESS

    这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...

  6. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  7. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  9. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

随机推荐

  1. Unity的AnimationCurve

    转自:风宇冲Unity3D教程学院http://blog.sina.com.cn/s/blog_471132920101f8nv.html,本文有多处增删减改,详细内容请查看原文. 1.介绍 Anim ...

  2. redis优化小建议

    1.优化的一些小建议 1.尽量使用短的key 当然在精简的同时,不要为了key的"见名知意".对于value有些也可精简,比如性别使用0.1. 2.每个redis设置合理内存 每个 ...

  3. 乘风破浪,遇见Visual Studio 2022预览版(Preview),宇宙最强开发者工具首次迎来64位版本

    简介 众所周知,我们从官方新闻来看,对Visual Studio 2022最大的期待莫过于:其是首个64位的Visual Studio,这个宇宙最强开发者工具一脚迈入了新的阶段. https://vi ...

  4. css中的毛玻璃(不是透明度) 简单文档

    其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...

  5. 38、linux中软件的安装方法

    38.1.rpm安装: rpm -ivh 包名# i:安装的软件: v:显示正在安装的软件信息: h:显示安装软件的进度: rpm -ql 包名 #查看安装包里的文件: rpm -qa 包名#查询包是 ...

  6. hdu 3306 Another kind of Fibonacci 矩阵快速幂

    参考了某大佬的 我们可以根据(s[n-2], a[n-1]^2, a[n-1]*a[n-2], a[n-2]^2) * A = (s[n-1], a[n]^2, a[n]*a[n-1], a[n-1] ...

  7. Machine Schedule 赤裸裸的二分匹配 二部图中的点覆盖书==匹配数

    Machine Schedule 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 ...

  8. easyui的combobox的onChange事件的实现

    easyui的combobox的onChange事件的实现,直接上代码: <div style="display:inline;margin-left:15px;"> ...

  9. 《Do Neural Dialog Systems Use the Conversation History Effectively? An Empirical Study》

    https://zhuanlan.zhihu.com/p/73723782 请复制粘贴到markdown 查看器查看! Do Neural Dialog Systems Use the Convers ...

  10. ROS2学习之旅(13)——创建ROS2 功能包

    一个功能包可以被认为是ROS2代码的容器.如果希望能够管理代码或与他人共享代码,那么需要将其组织在一个包中.通过包,可以发布ROS2工作,并允许其他人轻松地构建和使用它. 在ROS2中,创建功能包使用 ...