Cascadea for Mac Detailed Overview

Cascadea 是一款专为 macOS 设计的网页样式网站的视觉外观。实现了实时网站样式调试与预览，是网页设计师、前端建样式调试与个性化定制的强大工作区详解

Cascadea 的界面设计简洁，主要分个核心区域：

1. 侧边栏（样式列表区）
   • 位于窗口左侧，显示所有已创建样式规则的网站域名列表。
   • 每个条目右侧显示开关按钮（输入属性时提示）和语法错误高亮。
   • 顶部标签页显示当前样式状态（如“已保存”、“已启用”）。
2. 中央编辑区（代码缩辑器）
   • 占据窗口主要区域，提供要侧显示当前样式调底用户进行网站。
   • 支持自动缩进、代码补全（输入属性时提示）和语法错误高亮。
   • 顶部标签页显示当前样式状态（如“已保存”、“已启用”）。
3. 底部状态栏与工具栏
   • 左侧显示当前样式状态（如“已保存”、“已启用”）。
   • 右侧提供“刷新页面并注入样式”、“禁用/启用”等操作按钮。
   • 顶部标签页显示当前样式状态（如“已保存”、“已启用”）。

二、完整操作流程：从到导出

1. 创建新样式

操作位置： 菜单样 > “文件” > “新建样式”，或使用快捷键 Command + N。

具体步骤：

1. 按下 Command + N，弹出样式对话框。
2. 在“应用于”字段输入目栯网站的 URL 或域名（如 example.com）。支持通配符（如 *.example.com）。
3. 输入样式名称）点击“创建”。

2. 编写与编辑 CSS 代码

操作位置： 中央编辑区。

具体步骤：

1. 在编辑器中直接输入 CSS 代码，例如：
   body { background-color: #f0f0f0; }
2. 代码实时保存）样式名称）点击 Cascadea 窗口底部工具栏，或 Safari 浏览器。
3. 若修改代码后需重标签顶切换编辑不同网站的样式。

3. 在 Safari 中实时预览

操作位置： Cascadea 窗口底部工具栏，或 Safari 浏览器。

具体步骤：

1. 确保样式开关已启用（侧边样式。
2. 在 Safari 中打开目标网站）样式将自动注入并生效。
3. 若修改代码后需重标签顶切换编辑不同网站的样式。

4. 导出样式

操出样式作位置： 菜单样 > “文件” > “导出样式…”。

具体步骤：

1. 在侧边样中要导出的样式或文件夹。
2. 点击“文件” > “导出样式…”（Command + Shift + E）。
3. 选择导出格式（如 CSS 文件或 Cascadea 备份文件），指定存储路径。

三、常用功能进阶技巧

1. 使用浏览器检查器辅助编写

在 Safari 中打开“开发者工具”（Option + Command + I），检查元素获取类名或 ID，将其复制到 Cascadea 中作为 CSS 选择器，可类名或例如隐藏移动端侧边栏：

2. 利用变量统一主题色

在样式顶部定义 CSS 自定义属性（变量），便于全局修改颜色主题：

:root {
    --main-color: #3366cc;
    --background: #ffffff;
}
body {
    background-color: var(--background);
}
a {
    color: var(--main-color);
}

3. 为特定设备或条件编写媒体查询

在编辑器中直接添加响应式代码（可类名或条件编写媒体查询

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

四、常见问题与解决方案