面试：SASS/LESS/SCSS区别

我们从基本使用，作用域，变量，嵌套，运算等方面讨论

基本使用

less和scss

css 复制代码

.box {
  display: block;
}

sass

sass 复制代码

.box 
  display: block

变量

sass/scss使用$

less使用@

Scss:

scss 复制代码

$b-white: white;
$p-fixed: fixed;
.div{
   position: $p-fixed;
   border: 1 solid $b-white;
}

Less

less 复制代码

@b-white: white;
@p-fixed: fixed;
.div{
 position: @p-fixed;
 border: 1 solid @b-white;
}

作用域

scss,sass和less作用域机制相同，这里用scss举例

局部作用域 (Local Scope):

如果你在一个特定的选择器块内部定义了一个变量，那么这个变量只在该选择器块及其内部的子选择器中可用。

scss 复制代码

.sidebar {
  $sidebar-width: 200px; // 局部变量，只在 .sidebar 及其子元素可用
  width: $sidebar-width;

  .widget {
    padding-left: $sidebar-width / 2; // 在子元素 .widget 中可用
  }
}

.content {
  // 错误：在这里使用 $sidebar-width 会报错，因为它只在 .sidebar 的作用域内定义
   width: $sidebar-width;
}

顶层作用域 (Top-Level Scope) / 文件作用域 (File Scope):

如果你在任何选择器块之外直接定义一个变量（在文件的最顶层），那么这个变量在整个 SASS/SCSS 文件中都是可用的。
顶层变量和局部变量冲突时，局部变量优先

scss 复制代码

// 顶层变量，在整个文件都可用
$primary-color: #3498db;
$base-font-size: 16px;

body {
  font-size: $base-font-size;
  background-color: lighten($primary-color, 50%);
}

.header {
  background-color: $primary-color;
  color: white;
}

.footer {
  font-size: $base-font-size * 0.9;// 在另一个选择器中使用顶层变量
}

3. !global 在局部作用域设置全局变量

scss 复制代码

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

嵌套

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同

区别只是 Sass 用没有大括号的方式书写

&的作用

1. 引用父选择器本身

这是 & 最基本和最常见的用法。

scss 复制代码

.parent {
  color: blue;// CSS: .parent { color: blue; }

  &.child {// '&' 代表 '.parent'
    color: red;// CSS: .parent.child { color: red; }
  }
}

2. 引用伪类或伪元素

& 常常与伪类（如 :hover, :focus, :active, :nth-child() 等）和伪元素（如 ::before, ::after）结合使用。

scss 复制代码

// Sass/SCSS 示例
.button {
  background-color: navy;

  &:hover { // '&' 代表 '.button'
    background-color: darkblue; // CSS: .button:hover { ... }
  }

  &:active { // '&' 代表 '.button'
    background-color: deepskyblue; // CSS: .button:active { ... }
  }

  &::before { // '&' 代表 '.button'
    content: ">> "; // CSS: .button::before { ... }
  }

  &.disabled { // '&' 代表 '.button'
    opacity: 0.5; // CSS: .button.disabled { ... }
  }
}

运算

加减乘除

less 复制代码

@base-width: 100px;
@padding: 10px;

.element {
  width: @base-width + @padding * 2; // 结果：120px
  height: @base-width - @padding;   // 结果：90px
  font-size: @base-width / 2;       // 结果：50px
}

为了避免歧义，SCSS 在进行除法运算时需要满足以下条件之一：

条件一：值是变量或函数的返回值

arduino 复制代码

$width: 200px;
$half-width: $width / 2;// 这是合法的除法

条件二：值被括号括起来

perl 复制代码

$ratio: (100px + 50px) / 2;// 括号内作为一个表达式

条件三：值是另一个表达式的一部分

arduino 复制代码

$size: 100px + (50px / 2);// 括号内的除法作为表达式的一部分

小结一下：

SCSS 和 SASS 的区别

区别在sass使用缩进语法，不使用大括号和分号

SCSS使用大括号 {} 和分号 ; 任何 CSS 代码都是有效的 SCSS 代码。

变量都是用$

SCSS 和 LESS 区别

特性	SCSS	LESS
语法	CSS 超集，`$` 声明变量，`@mixin`/`@include` 定义/调用混合	CSS 扩展，`@` 声明变量，`.mixin` 定义混合，混合调用带括号或不带括号
变量符号	`$`	`@`
混合定义方式	`@mixin`	`.` (类选择器方式)
继承	`@extend` 指令（更强的继承能力）	没有直接的 `@extend`，通过混合实现部分复用
作用域	更严格的局部作用域	相对宽松，变量和混合更易全局化