是支持@Layers和更好模块化的现代替代品吗？

Question

和结构化模块化的内置支持。

i最近开始研究layerCss，这是一种开源样式语言，介绍了：

✅

@@层以更好地结构

✅全球和局部变量 ✅tonged块和混合物
✅延伸可延迟的模块化样式
there是行动中的外行的一个例子：

@layer base {
  body {
    background: var(--primary-color);
  }
}

@layer components {
  .button {
    background: var(--secondary-color);
  }
}

我的问题： 是否还有其他现代CSS预处理器或替代方案本身整合？ Layercs在大型项目中有用吗？
🔗tryLayerCss Live：https：//seb3rhjck.github.io/layercss.lyc/

🔗🔗github repo：

https：//github.com/seb3rhjck/layercss.lyc

向前看您的反馈！ 🚀

您已经确定了传统CSS预处理器中的关键差距！在将
@layer

介绍给CSS之前创建了Sass，Light和Stylus，因此它们对此功能强大的功能没有本机支持。

电流替代品

实际上，还没有太多本地支持的预处理器。大多数现代方法都采取不同的方向：
本性CSS-现代CSS现在支持我们过去需要预处理器的许多功能： 本性CSS变量（自定义属性）

sentative CSS嵌套（现在在所有主要浏览器中支持）

Answer 1

管理特异性和级联

包机查询和颜色功能

CSS-IN-JS解决方案

-许多前端框架使用基于JavaScript的样式方法，以不同的方式处理模块化样式。

1. POSTCSS

   -虽然不完全是预处理器，但带有插件的Postcs可以处理现代CSS功能，包括@layer.

   。
   • layercs是一种很好的方法？
   基于您的描述，LayerCss似乎通过结合来满足真正的需求：
   • 预处理器的熟悉语法（变量，嵌套，混音）现代的CSS功能，例如
   @layer
   CSS体系结构的结构化方法
2. 对于大型项目，这种方法可能非常有价值，因为：

   @layer

   这使您可以明确控制级联，从而更容易管理复杂应用程序中的特异性冲突[1] [2]。
替代方法
3. 如果您不致力于创建新的预处理器，请考虑：
   使用PostCSS
   的本机CSS-用
@layer

编写现代CSS，并使用PostCS进行自动改装等功能。

使用SASS用于预处理 +输出分层CSS

-您仍然可以使用SASS，但要构建输出来利用CSS层：

• @layer framework, base, components, utilities;
  
  @layer base {
    body {
      background: var(--primary-color);
    }
  }
  
  @layer components {
    .button {
      background: var(--secondary-color);
    }
  }
  

layercss
• 的价值主张

我认为LayerCss对于从预处理器过渡到想要的现代CSS的团队可能很有价值：

预处理器语法的熟悉程度

现代CSS功能诸如

@layer

CSS组织的结构化方法

它填补了生态系统中的真正空白。成功的关键是使其易于采用并与现有工具链集成。 该项目的运气好:-)对于需要更好的CSS组织的大规模应用程序听起来很有希望！

[1]
1. https：//hackernoon.com/css-layers-tutorial-ustanding-css-spapsulation

   [2]

   https：//www.designsystemscollective.com/mastering-casss-cascade-layers-for-scalable-designsignsignsystems-981fdab2a961