先说一个大家都不怎么明确的 scss 与 sass 区别

Sass 有两套语法规则：

• 一种是用缩进作为分隔符来区分代码块的

.father 
    width:100px; 
    .son width:50px;

• 一种是和 Css 一样采用了大括号{}作为分隔符。后一种语法规则又名 Scss，其实它也是 Sass

.father{ 
    width:100px; 
    .son{ 
        width:50px; 
    } 
}

现在来看他们分别怎么定义和使用变量

css

// 定义
.foo {
  --borderColor: #d9d9d9;
}

// 使用
.foo {
  border: 1px solid var(--borderColor);
}

less

// 定义
@bg-color : #d9d9d9;

// 使用
.foo {
  border-right: 1px solid @bg-color;
}

scss

//定义
$bg-color : #d9d9d9;

// 使用
.foo {
  border: 1px solid $bg-color;
}