fix(css): add layer() function page (#35508)

* fix(css): add layer() function page

* Apply suggestions from code review

files/en-us/web/css/@import/index.md

@@ -37,6 +37,8 @@ where:
     If the browser does not conform to the conditions specified in the _supports-condition_, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.
     The syntax of `supports()` is almost identical to that described in {{CSSxRef("@supports")}}, and that topic can be used as a more complete reference.
 
+Use `@import` together with the `layer` keyword or `layer()` function to import external style sheets (from frameworks, widget stylesheets, libraries, etc.) into layers.
+
 ## Description
 
 Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating [`@layer`](/en-US/docs/Web/CSS/@layer) statements.

files/en-us/web/css/@import/layer_function/index.md

@@ -0,0 +1,41 @@
+---
+title: layer()
+slug: Web/CSS/@import/layer_function
+page-type: css-function
+browser-compat: css.at-rules.import.layer
+---
+
+{{CSSRef}}
+
+The **`layer()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used along with the [`@import`](/en-US/docs/Web/CSS/@import) [at-rule](/en-US/docs/Web/CSS/At-rule) to put the imported resource in a separate named [cascade layer](/en-US/docs/Web/CSS/@layer).
+
+## Syntax
+
+```css
+@import url layer(layer-name);
+@import "dark.css" layer(framework.themes.dark);
+```
+
+The `framework.themes.dark` is the layer into which the CSS file would be imported.
+
+## Formal syntax
+
+```plain
+layer() = layer( <layer-name> )
+
+<layer-name> =
+  <ident> [ '.' <ident> ]*
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSxRef("@import")}}
+- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module