面试题：CSS之SASS/SCSS变量与嵌套的复杂场景应用

Question

假设你正在开发一个响应式电商网站，商品列表需要根据屏幕宽度展示不同的布局。请利用SASS/SCSS的变量和嵌套功能，实现商品列表在不同屏幕尺寸下（如手机、平板、桌面）的样式切换，包括但不限于间距、字体大小、图片尺寸等样式属性的调整，阐述变量和嵌套在其中起到的优化作用。

Answer 1

1. 使用SASS/SCSS实现商品列表样式切换

以下是一个简单的SASS/SCSS示例，展示如何根据不同屏幕尺寸调整商品列表样式：

// 定义变量
$mobile-breakpoint: 768px;
$tablet-breakpoint: 1024px;

// 商品列表基本样式
.product-list {
  margin: 20px;
  font-size: 16px;

  img {
    width: 100%;
    height: auto;
  }

  // 手机屏幕样式
  @media (max-width: #{$mobile-breakpoint}) {
    margin: 10px;
    font-size: 14px;

    img {
      width: 50%;
    }
  }

  // 平板屏幕样式
  @media (min-width: #{$mobile-breakpoint} + 1) and (max-width: #{$tablet-breakpoint}) {
    margin: 15px;
    font-size: 15px;

    img {
      width: 70%;
    }
  }

  // 桌面屏幕样式（保持基本样式不变，也可进一步定制）
  @media (min-width: #{$tablet-breakpoint} + 1) {
    // 这里可添加桌面独有的样式
  }
}

2. 变量和嵌套的优化作用

变量的优化作用

• 提高可维护性：通过定义$mobile-breakpoint和$tablet-breakpoint等变量，当需要修改断点值时，只需在变量定义处修改一次，而无需在每个媒体查询中逐一修改，大大减少了维护成本。
• 增强代码可读性：变量名直观地表达了其含义，使得代码更易于理解。例如，$mobile-breakpoint明确表示这是手机屏幕的断点值，比直接写具体像素值更清晰。

嵌套的优化作用

• 保持代码结构清晰：将商品列表及其子元素（如img）的样式嵌套在.product-list选择器内，使得相关样式集中在一起，结构更加清晰。例如，在.product-list选择器内，一眼就能看到商品列表及其内部图片在不同屏幕尺寸下的样式变化。
• 减少重复代码：嵌套避免了重复书写父选择器。在媒体查询中，直接在.product-list内部嵌套，无需每次都重复写.product-list选择器，提高了代码的简洁性。例如，在手机屏幕媒体查询中，直接在.product-list内部修改margin、font-size和img的样式，而不需要再次写.product-list。