CSS 即將支持嵌套，SASS/LESS 等預處理器已無用武之地？

作者：SbCoco 2021-08-12 06:38:23

開發前端

隨著 CSS 自定義屬性(CSS Variable)的大規模兼容，到如今 CSS 即將支持嵌套，一些預處理器的核心功能已經被 CSS 原生支持，這是否表示 SASS/LESS 等預處理器已無用武之地?即將被淘汰了?

[[417033]]

最近，有一則非常振奮人心的消息，CSS 即將原生支持嵌套 -- Agenda+ to publish FPWD of Nesting[1]，表示 CSS 嵌套規范即將進入規范的 FWPD 階段。

目前對應的規范為 -- CSS Nesting Module[2]。

規范的幾個階段

首先簡單介紹一下，一個規范從提出到落地，會經歷的一些階段：

編輯草案 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 支持了自定義屬性和嵌套之后依舊欠缺的，我簡單羅列羅列我的看法。

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[3]

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[4]

@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[5])，提議 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[6] 可以略窺一二。

原因是 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 實現的效果：夏日夕陽圖[7]。

我們通過隨機，每次刷新都可以得到高度/寬度不一樣，位置不一樣的 div 塊，利用隨機的特性，繪制一幅幅不一樣的效果圖：

DEMO -- 夏日夕陽圖[8]

目前原生 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[9]

簡單搬運其中一些比較有意思的觀點。

假設 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 陰影技巧與細節[10]，介紹過一種利用多重陰影實現立體陰影的效果，譬如我們要實現下面這個效果：

其中的陰影的顏色變化就借助了 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基礎—顏色函數[11]。

除了顏色，數學函數也是經常在 CSS 效果中會需要用到的。

我在這篇文章中 -- 在 CSS 中使用三角函數繪制曲線圖形及展示動畫[12]，專門講了如何利用 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[13] 中被提及定義，相信不久的將來也會逐漸落地。

關于社區對數學函數的一些討論，感興趣的也可以看看這里：Mathematical Expressions[14]

總結一下

好了，綜上總結一下，就目前而言，我覺得 SASS/LESS 等預處理器在很多方面還是有有用武之地的，在上述的一些功能原生 CSS 沒有完全落地之前，預處理器能一定程度上彌補 CSS 的不足。

并且，除去上述說的一些我個人認為比較重要有意思的功能、函數之外，預處理器其它一些核心功能，譬如 extend、mixins 等也能有效的提升開發時的效率。

所以，在未來的一段時間內，我認為預處理器還是能和 CSS 友好共存~

最后

好了，本文到此結束，希望對你有幫助 :)

參考資料

[1]Agenda+ to publish FPWD of Nesting:

https://lists.w3.org/Archives/Public/www-style/2021Mar/0019.html

[2]CSS Nesting Module:

https://drafts.csswg.org/css-nesting/

[3]CodePen Demo -- CSS Candles:

https://codepen.io/Chokcoco/pen/jJJbmz

[4]深入探討 CSS 特性檢測 @supports 與 Modernizr:

https://www.cnblogs.com/coco1s/p/6478389.html

[5]css-values - if() function:

https://github.com/w3c/csswg-drafts/issues/3455

[6]scss-values - if() function:

https://github.com/w3c/csswg-drafts/issues/3455

[7]夏日夕陽圖:

https://csscoco.com/inspiration/#/./cssdoodle/sunset

[8]DEMO -- 夏日夕陽圖:

https://csscoco.com/inspiration/#/./cssdoodle/sunset

[9][css-values] random() function:

https://github.com/w3c/csswg-drafts/issues/2826

[10]你所不知道的 CSS 陰影技巧與細節:

https://github.com/chokcoco/iCSS/issues/39

[11]Sass基礎—顏色函數:

https://www.sass.hk/skill/sass25.html

[12]在 CSS 中使用三角函數繪制曲線圖形及展示動畫:

https://github.com/chokcoco/iCSS/issues/72

[13]CSS Values and Units Module Level 4:

https://drafts.csswg.org/css-values-4/#exponent-funcs

[14]Mathematical Expressions:

https://drafts.csswg.org/css-values/#math

責任編輯：姜華來源： iCSS前端趣聞