docs(advance): [css-mixin] add description for embedding css with conditional

Author: akinoccc

docs/guide/advances/css-mixin.md

@@ -4,6 +4,8 @@ outline: deep
 
 # CSS Mixin
 
+## Generate CSS Section
+
 We offer a function named `css` to generate css section and the return value can be used in styled function.
 
 Such as:
@@ -30,7 +32,25 @@ Such as:
 ```
 :::
 
-# Common CSS Class
+## Embedded CSS with Conditional
+
+```vue
+<script setup lang="ts">
+  import { styled, css } from '@vvibe/vue-styled-components'
+
+  const testCss1 = css`
+    background: white;
+  `
+  const testCss2 = css`
+    background: blue;
+  `
+  const TestEmbedComponent = styled('div', { status: Boolean })`
+    ${(props) => props.status ? testCss1 : testCss2}
+  `
+</script>
+```
+
+## Using Common CSS with Class
 
 You can also use `cssClass` to generate a common css class. The function will inject your css and return a class name
 

docs/zh/guide/advances/css-mixin.md

@@ -30,6 +30,24 @@ Such as:
 ```
 :::
 
+## 有条件地嵌套 CSS
+
+```vue
+<script setup lang="ts">
+  import { styled, css } from '@vvibe/vue-styled-components'
+
+  const testCss1 = css`
+    background: white;
+  `
+  const testCss2 = css`
+    background: blue;
+  `
+  const TestEmbedComponent = styled('div', { status: Boolean })`
+    ${(props) => props.status ? testCss1 : testCss2}
+  `
+</script>
+```
+
 # 公共 CSS 类
 
 你还可以使用 `cssClass` 来生成一个可公用的样式类，该函数会创建你传入的 CSS 并返回一个类名。