CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？

时间  2021-08-12
标签 css html 前端 git github segmentfault 浏览器 sass app less 栏目 CSS 繁體版
原文   原文链接

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

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

随着 CSS 自定义属性（CSS Variable）的大规模兼容，到现在 CSS 即将支持嵌套，一些预处理器的核心功能已经被 CSS 原生支持，这是否表示 SASS/LESS 等预处理器已无用武之地？即将被淘汰了？前端

规范的几个阶段

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

  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 内部和小组外部更普遍社会的反馈。完善规范的设计。github

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

除此以外，我以为 SASS\LESS 等预处理器还有一些比较有意思的功能（函数），是即使原生 CSS 支持了自定义属性和嵌套以后依旧欠缺的，我简单罗列罗列个人见解。浏览器

for() 循环函数

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

可是其实在预处理器中，循环还算是比较经常使用的一个功能。考虑下面这种布局：app

ul 下面有多个 li，每一个 li 的高度递增 20px，一个一个写固然也能够，可是有了循环其实能极大减小工做量：less

<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](https://github.com/w3c/csswg-...

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

假设 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 个 .foo 的 color 值是否同样？
  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 友好共存~

最后

好了，本文到此结束，但愿对你有帮助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过个人公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 效果能够关注个人 CSS 灵感

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程