关于前端:CSS-即将支持嵌套SASSLESS-等预处理器已无用武之地

5次阅读

共计 7773 个字符，预计需要花费 20 分钟才能阅读完成。

最近，有一则十分振奋人心的音讯，CSS 行将原生反对嵌套 — Agenda+ to publish FPWD of Nesting，示意 CSS 嵌套标准行将进入标准的 FWPD 阶段。

目前对应的标准为 — CSS Nesting Module。

随着 CSS 自定义属性（CSS Variable）的大规模兼容，到现在 CSS 行将反对嵌套，一些预处理器的外围性能曾经被 CSS 原生反对，这是否示意 SASS/LESS 等预处理器已无用武之地？行将被淘汰了？

首先简略介绍一下，一个标准从提出到落地，会经验的一些阶段：

编辑草案 Editor’s Draft (ED)
工作草案 Working Draft (WD)
过渡-最初通告工作草案 Transition – Last Call Working Draft (LCWD)
候选举荐规范 Candidate Recommendation (CR)
过渡-倡议举荐规范 Transition – Proposed Recommendations (PR)
举荐规范 Recommendation (REC)

上文说的，行将进入 FPWD，只是处于标准的第 2 个阶段 WD 阶段，FPWD 示意第一次公开工作草案（First Public Working Draft (FPWD)）。FPWD 前面还会有数个工作草案，会解决来自 CSSWG 外部和小组内部更宽泛社会的反馈。欠缺标准的设计。

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

除此之外，我感觉 SASS\LESS 等预处理器还有一些比拟有意思的性能（函数），是即使原生 CSS 反对了自定义属性和嵌套之后仍旧欠缺的，我简略列举列举我的认识。

目前，原生 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() 条件语句。

其实，CSS 中有一类十分相似条件语句的写法，也就是媒体查问 @media 以及个性检测 @supports 语句，目前 CSS 中反对的相似条件抉择的一些写法如下：

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

另外一种常见的条件语句就是媒体查问，这个大家还是比拟相熟的。

如果以后设施满足一种什么条件，则怎么样怎么样。

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;
}

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-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 实现的随机函数，有一些事件是须要被解决或者失去大家的认可的：

random(0, 255) 的值在什么时候被确定，是在每一次 CSS 解析时，还是每一次被利用触发时？
对于上述 DEMO，3 个 .foo 的 color 值是否一样？
对于重复的 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 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完

前端

发表至：前端

2021-08-10

0

关于小程序云开发:微信小程序云开发支付

关于前端:CSS-即将支持嵌套SASSLESS-等预处理器已无用武之地

标准的几个阶段

for() 循环函数

利用预处理器循环性能实现的一些成果展现

if() 条件语句

@support 条件语句

@media 条件语句

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

Random() 随机函数

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

工具函数：色彩函数、数学函数

总结一下

最初

站内搜索

关于前端:CSS-即将支持嵌套SASSLESS-等预处理器已无用武之地

标准的几个阶段

for() 循环函数

利用预处理器循环性能实现的一些成果展现

if() 条件语句

@support 条件语句

@media 条件语句

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

Random() 随机函数

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

工具函数：色彩函数、数学函数

总结一下

最初

站内搜索

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