面试题：CSS之SASS/SCSS变量与嵌套功能基础运用

Question

请阐述在SASS/SCSS中定义变量的两种常见方式，并举例说明如何使用变量来统一网站主题颜色。同时，展示一个使用嵌套功能来编写导航栏样式的SCSS代码片段。

Answer 1

定义变量的两种常见方式

1. 使用$符号定义变量 在SASS/SCSS中，使用$符号来声明变量。例如：

// 定义一个颜色变量
$primary-color: #007bff; 

body {
  background-color: $primary-color;
}

2. 使用!default声明默认变量 !default用于设置变量的默认值，如果变量已经被赋值，那么!default声明的默认值不会生效。例如：

// 定义默认颜色变量
$secondary-color: #6c757d !default; 

// 重新赋值（如果之前没有赋值）
$secondary-color: #28a745; 

p {
  color: $secondary-color;
}

使用变量统一网站主题颜色示例

// 定义主题颜色变量
$theme-color: #0056b3; 

// 网站整体背景使用主题颜色
body {
  background-color: $theme-color;
}

// 标题颜色使用主题颜色
h1 {
  color: $theme-color;
}

使用嵌套功能编写导航栏样式的SCSS代码片段

nav {
  background-color: #f8f9fa;
  padding: 10px;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      display: inline;
      margin-right: 15px;

      a {
        text-decoration: none;
        color: #333;

        &:hover {
          color: #007bff;
        }
      }
    }
  }
}