当谈到CSS预处理器时，SASS和LESS是两种常见的选择。它们都是基于CSS的预处理器，提供了一些额外的功能和语法来增强CSS的编写和维护能力。下面是它们与纯CSS之间的区别，以及具体的代码示例：

变量

  • CSS：纯CSS不支持变量。您需要多次使用相同的值时，需要手动复制和粘贴。

.header {
  color: #ff0000;
}

  • SASS：

$primary-color: #ff0000;
​
.header {
  color: $primary-color;
}

  • LESS：

@primary-color: #ff0000;
​
.header {
  color: @primary-color;
}

嵌套

  • CSS：在CSS中，您需要手动编写选择器嵌套，这可能导致样式表变得冗长和难以维护。

.header {
  color: #000;
}
​
.header h1 {
  font-size: 20px;
}

  • SASS：

.header {
  color: #000;
  
  h1 {
    font-size: 20px;
  }
}

  • LESS：

.header {
  color: #000;
  
  h1 {
    font-size: 20px;
  }
}

Mixins（混合）

  • CSS：在CSS中，您需要手动编写重复的代码块。如果需要更改这些代码块，您必须在多个地方进行更改。

.button {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

  • SASS：

@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
​
.button {
  @include border-radius(5px);
}

  • LESS：

.border-radius(@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.button {
  .border-radius(5px);
}

继承

  • CSS：纯CSS不支持选择器之间的继承关系。

.error {
  color: red;
}
​
.warning {
  color: red;
  font-weight: bold;
}

  • SASS：

.error {
  color: red;
}
​
.warning {
  @extend .error;
  font-weight: bold;
}

  • LESS：

.error {
  color: red;
}
​
.warning:extend(.error) {
  font-weight: bold;
}

导入

  • CSS：在纯CSS中，如果要导入其他CSS文件，您需要使用<link>标签将它们引入到HTML文件中。

  • SASS：

@import 'variables';
@import 'typography';

  • LESS：

@import 'variables';
@import 'typography';

总而言之，SASS和LESS都是CSS的扩展，提供了更多的功能和灵活性，使样式表更易于编写和维护。选择使用哪种预处理器取决于个人偏好和项目需求。无论您选择哪种预处理器，最终都会将其编译为普通的CSS代码供浏览器解析。