scss和less的区别

南雨北斗
258 阅读3分钟

  1. 语法差异

    • 变量定义

      • SCSS：使用$符号来定义变量。例如：$primary - color: #3498db;，在使用变量时直接将变量名放在需要的属性值位置即可，如color: $primary - color;。
      • Less：使用@符号定义变量。例如：@primary - color: #3498db;，在属性值中引用变量也是直接写变量名，像color: @primary - color;。

    • 嵌套规则

      • SCSS：它的嵌套规则更像 CSS 的结构，并且可以使用&符号来表示父元素选择器。例如：

.parent {
   color: red;
  .child {
     color: blue;
     &:hover {
       color: green;
     }
   }
 }

  • Less：也支持嵌套规则，不过在父元素选择器引用上略有不同。例如：

.parent {
   color: red;
  .child {
     color: blue;
     &:hover {
       color: green;
     }
   }
 }

  • 从嵌套语法上看，两者很相似，但在一些复杂的嵌套场景或者与其他功能结合时可能会有细微差别。

  • 运算方式

    • SCSS：支持各种数学运算，包括加（+）、减（-）、乘（*）、除（/）等，运算可以在变量定义、属性值等多个地方使用。例如：$width: 100px; $new - width: $width + 50px;。

    • Less：同样支持基本的数学运算，但在运算时需要注意单位的处理。例如，Less 在进行乘法和除法运算时，如果数字和单位之间没有空格，可能会出现问题。像@width: 100px; @new - width: @width + 50px;这种运算在 Less 中也是可以的，但在单位处理细节上需要谨慎。

  1. 功能特性

    • 混合（Mixin）

      • SCSS：通过@mixin来定义混合，可以包含参数。例如：

 @mixin button - styles($color, $background - color) {
   color: $color;
   background - color: $background - color;
   padding: 10px 20px;
   border - radius: 5px;
 }
.btn {
   @include button - styles(#fff, #3498db);
 }

  • Less：使用.mixin()来定义混合，调用时使用.mixin()语法。例如：

.button - styles(@color, @background - color) {
   color: @color;
   background - color: @background - color;
   padding: 10px 20px;
   border - radius: 5px;
 }
.btn {
  .button - styles(#fff, #3498db);
 }

  • 两者的混合功能都很强大，但在定义和调用的语法上有所不同。

  • 继承

    • SCSS：使用@extend关键字实现继承。例如：

.base - class {
   font - size: 16px;
   font - family: Arial, sans - serif;
 }
.new - class {
   @extend.base - class;
   color: red;
 }

  • Less：通过:extend()语法实现继承。例如：

.base - class {
   font - size: 16px;
   font - family: Arial, sans - serif;
 }
.new - class {
   :extend(.base - class);
   color: red;
 }

  1. 编译环境和生态系统

    • 编译器

      • SCSS：通常与 Ruby on Rails 集成得很好，因为它最初是基于 Ruby 开发的。在其他环境中，像 Node.js 环境下可以使用node - sass或dart - sass来编译。node - sass是基于 LibSass 的，它是一个 C/C++ 库，而dart - sass是用 Dart 语言编写的，速度更快、更符合标准，但可能在一些旧的工具链中兼容性稍差。
      • Less：主要基于 JavaScript，在 Node.js 环境下有很好的支持。可以通过lessc命令行工具或者在构建工具（如 Webpack 中使用less - loader）进行编译。

    • 插件和工具生态系统

      • SCSS：由于其广泛的使用和与 Ruby 等生态系统的联系，有很多成熟的插件和工具可以用于代码格式化、变量检查、样式指南检查等。例如，stylelint可以用于检查 SCSS 代码是否符合特定的风格指南。
      • Less：也有一些工具，但在数量和多样性上相对 SCSS 可能稍逊一筹。不过，在 JavaScript 为主的生态系统中，它可以很好地与其他前端工具集成，如在一些基于 JavaScript 的自动化构建流程中很方便地嵌入 Less 编译步骤。

  2. 社区和文档支持

    • SCSS：作为 CSS 预处理器中的主流选择之一，有庞大的社区。这意味着在遇到问题时更容易找到解决方案，并且有大量的教程、博客文章和开源项目可供参考。其官方文档也比较详细，涵盖了各种功能的使用方法和示例。
    • Less：也有自己的社区，不过规模相对小一些。文档相对简洁，能够满足基本的使用需求，但在一些复杂功能的深入讲解和高级用法示例方面可能不如 SCSS 丰富。
avatar
文章
阅读
粉丝