详细说明: - 基于文旅订单班框架复制创建food-order-demo项目 - 修改端口配置为4174避免冲突 - 更新LandingPage为青莳轻食主题(绿色健康风格) - 重新定义7个食品行业专业Agent: * 市场研究专家:轻食市场分析、客群画像 * 营养配方师:营养成分配比、低卡高蛋白设计 * 供应链管理专家:有机食材供应、溯源体系 * 品牌策划师:品牌定位、店铺空间布局 * 财务分析师:投资预算、ROI分析 * 运营管理专家:运营流程、品控标准 * 食品创业导师:中央协调、方案整合 - 创建专用启动脚本start.sh - 验证系统可正常运行在端口4174 - 实现代码复用率90%,符合预期目标 影响文件: web_frontend/food-order-demo/ 技术栈: React 18 + TypeScript + Tailwind CSS + Zustand
1.9 KiB
1.9 KiB
PostCSS Nested
PostCSS plugin to unwrap nested rules closer to Sass syntax.
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
.title {
font-size: var(--font);
@at-root html {
--font: 16px;
}
}
will be processed to:
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto;
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}
.title {
font-size: var(--font);
}
html {
--font: 16px;
}
Related plugins:
- Use
postcss-current-selectorafter this plugin if you want to use current selector in properties or variables values. - Use
postcss-nested-ancestorsbefore this plugin if you want to reference any ancestor element directly in your selectors with^&.
Alternatives:
- See also
postcss-nesting, which implements CSSWG draft. postcss-nested-propsfor nested properties likefont-size.
Docs
Read full docs here.