Css、Less、Scss 中分别如何定义变量

在CSS、Less和SCSS中，你可以定义变量来存储和重用颜色、字体、间距等值。以下是在这三种语言中定义变量的方式：

在CSS中：原生的CSS不直接支持变量，但可以使用自定义属性（Custom Properties）来模拟变量。自定义属性以--开头，如--main-color。然后，你可以在元素中使用var()函数来引用这些自定义属性，如color: var(--main-color);。

cssCopy code
:root {
  --main-color: #007bff;
}

.element {
  color: var(--main-color);
}

在Less中：Less是一种CSS预处理器，支持使用@符号来定义变量。变量的名称以@开头，如@main-color。

lessCopy code
@main-color: #007bff;

.element {
  color: @main-color;
}

在SCSS中：SCSS也是一种CSS预处理器，支持使用$符号来定义变量。变量的名称以$开头，如$main-color。

scssCopy code
$main-color: #007bff;

.element {
  color: $main-color;
}

补充说明一下大家都不怎么明确的 scss 与 sass 区别

Sass 有两套语法规则：

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

css
复制代码
.father 
    width:100px; 
    .son width:50px;

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

scss
复制代码
.father{ 
    width:100px; 
    .son{ 
        width:50px; 
    } 
}