Sass与Less的特性与区别

前言

Sass和Less简介

Sass

Sass是一种CSS预处理器，它使用一个更加强大的语法来编写CSS。Sass允许使用变量、嵌套、混合（mixins）、继承等功能，从而提高代码的可重用性和可维护性。

Less

Less也是一种CSS预处理器，它同样提供了变量、混合、函数等特性。Less的语法相对简单，易于上手，它可以在服务器端编译。

Sass与Less对比

变量

Sass

$primary-color: #42b983;

.button {
  background: $primary-color;
}

Less

@primary-color: #42b983;

.button {
  background: @primary-color;
}

嵌套

Sass

.nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

Less

与Sass相同

Mixin（混入）

Sass

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
}

Less

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  .flex-center();
}

继承（Extend）

Sass

%base {
  border: 1px solid #ccc;
  padding: 10px;
}
.card {
  @extend %base;
}

Less

.base {
  border: 1px solid #ccc;
  padding: 10px;
}

.card {
  &:extend(.base);
}

运算

Sass

.container {
  width: 600px + 200px; // 800px
}

Less

.container {
  width: (600px + 200px); // 800px
}

条件语句

Sass

$theme: light;

@if $theme == light {
  body { background: white; }
} @else {
  body { background: black; }
}

Less

@theme: light;

body when (@theme = light) {
  background: white;
}
body when (@theme = dark) {
  background: black;
}

循环

Sass

@for $i from 1 through 3 {
  .m-#{$i} {
    margin: $i * 10px;
  }
}

编译后：

m-1 { 
	margin: 10px; 
} 
.m-2 { 
	margin: 20px; 
} 
.m-3 { 
	margin: 30px; 
}

Less

.loop(@i) when (@i <= 3) {
  .m-@{i} {
    margin: (@i * 10px);
  }
  .loop(@i + 1);
}
.loop(1);

编译结果一样，但 Less需要递归写法。 编译后：

m-1 { 
	margin: 10px; 
} 
.m-2 { 
	margin: 20px; 
} 
.m-3 { 
	margin: 30px; 
}

模块化与导入

Sass模块化

// math 模块
@use "sass:math";

.container {
  width: math.div(600px, 960px) * 100%;
}

Less导入

Less 只有 @import，没有 Sass 的模块系统

@import "variables.less";

.container {
  width: (600px / 960px * 100%);
}