Sass与Less：语法、变量声明与Mixin对比-优快云博客

本文链接：https://blog.youkuaiyun.com/work33/article/details/107050777

本文探讨了Sass和Less两种预处理器的主要区别，包括它们的语法差异、变量声明的方式以及Mixin的实现方式。Sass的Mixin使用类似于JavaScript函数，通过@include调用，而Less的Mixin则表现为类，直接作为函数使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别

1.语法不同

sass有两种语法格式
 

 1. 以.scss为后缀名的嵌套写法
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//-----------编译后
nav {
  width: 100px;
  color: #F90;
}
 2. 最早的缩进语法
 nav 
    width:100px;
    height:100px;
 编译后也是一样的

less的语法格式嵌套写法
  #header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

2.变量的声明不同

sass使用 $
$highlight-color: #F90;

less使用 @
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

3.Mixin不同

sass的用法与JavaScript的函数是一样的，定义后直接使用 @include调用

  @mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
//编译后
a {
  color: blue;
  background-color: red; }

less就是定义一个类，然后直接当函数使用(less不提供定义函数)

.b-coloe {
    border: 4px solid red;
}
.box {
    .b-coloe();
    width: 100px;
    height: 200px;
    background-color: blue;
}
//编译后
.b-coloe {
  border: 4px solid red;
}
.box {
  border: 4px solid red;
  width: 100px;
  height: 200px;
  background-color: blue;
}

sass与less的区别

区别