面试题：CSS中SASS/SCSS与LESS在变量声明上的主要区别

Question

请阐述在CSS预处理器SASS/SCSS与LESS中，变量声明的语法形式以及使用场景上有哪些主要区别，并分别举例说明。

Answer 1

变量声明语法形式区别

• SASS/SCSS：使用$符号声明变量，例如：

$primary-color: #007bff;
body {
  color: $primary-color;
}

• LESS：同样使用@符号声明变量，例如：

@primary-color: #007bff;
body {
  color: @primary-color;
}

使用场景主要区别及举例

• SASS/SCSS：功能相对更强大复杂，适用于大型项目。比如在一个有多种主题切换需求的项目中，SASS 可以通过复杂的嵌套规则和运算，结合变量实现主题切换。

$light-theme: (
  primary-color: #ffffff,
  secondary-color: #f8f9fa
);
$dark-theme: (
  primary-color: #121212,
  secondary-color: #343a40
);

.theme-light {
  @each $key, $value in $light-theme {
    --#{$key}: $value;
  }
}
.theme-dark {
  @each $key, $value in $dark-theme {
    --#{$key}: $value;
  }
}

• LESS：语法更简洁，易于上手，适合中小项目快速开发。例如一个简单的网站页面，通过变量快速定义一些基本样式。

@link-color: #007bff;
@link-hover-color: #0056b3;

a {
  color: @link-color;
  &:hover {
    color: @link-hover-color;
  }
}