// 定义全局颜色变量
// --color-primary: 主要颜色，用于强调或突出显示重要元素
$--color-primary: #155BD4;

// Navbar (导航栏) 样式
// 设置导航栏的背景色为主颜色
$navbar--background-color: $--color-primary;

// Sidebar (侧边栏) 样式
// 设置侧边栏深色背景色
$sidebar--background-color-dark: #263238;
// 设置侧边栏文字颜色为浅灰色，适合深色背景
$sidebar--color-text-dark: #8a979e;

// Content (内容区) 样式
// 设置主要内容区域的背景色为淡灰白色，提供舒适的阅读体验
$content--background-color: #f1f4f5;

/* 下面是使用上述变量的实际CSS规则示例 */

/* 导航栏 */
.navbar {
  background-color: $navbar--background-color; // 使用主要颜色作为导航栏背景
}

/* 侧边栏 */
.sidebar {
  background-color: $sidebar--background-color-dark; // 使用深色作为侧边栏背景
  color: $sidebar--color-text-dark; // 使用浅灰色作为侧边栏文本颜色
}

/* 内容区 */
.content {
  background-color: $content--background-color; // 使用淡灰白色作为内容区背景
}

