LESS、SASS 与 SCSS 预处理器详解

夜月还山岚

于 2024-10-11 11:51:06 发布

阅读量1k

点赞数 14

文章标签： less sass scss 前端 css

本文链接：https://blog.csdn.net/jxnd123456/article/details/142849490

版权

css作为前端入门必备三大件之一，每位前端攻城狮想必都已经有了一定的了解，但是与css相关的预处理器less、sass、scss等，可能还不太熟悉，在此为大家详细介绍一下。

一、LESS

1.定义

LESS 是一种动态样式语言，它扩展了 CSS 的功能，使样式编写更加高效和可维护。它允许开发者使用变量、混合（Mixin）、函数等特性来编写更具灵活性和可复用性的样式代码。

2.语法

2.1 变量

使用 @ 符号定义变量。

     @primary-color: #007BFF;
     @font-size: 16px;

     body {
       color: @primary-color;
       font-size: @font-size;
     }

2.2 混合（Mixin）

（1）定义混合：

       // 定义一个简单的混合
     .button-style() {
         padding: 10px 20px;
         background-color: #007BFF;
         color: white;
         border-radius: 5px;
       }

       // 定义带参数的混合
     .button-style2(@padding-top, @padding-right, @padding-bottom, @padding-left) {
         padding: @padding-top @padding-right @padding-bottom @padding - left;
         background-color: #007BFF;
         color: white;
         border-radius: 5px;
       }

（2）调用混合：

     .myButton {
       .button - style();
      }

     .myButton2 {
       .button - style2(10px, 20px, 10px, 20px);
      }

2.3 函数

     // 颜色函数
     @dark-color: darken(@primary - color, 10%);

     // 数学函数
     @width: 100px + 20px;

3.使用方式

可以通过在线编译器将 LESS 文件编译为 CSS 文件，然后在 HTML 中引入编译后的 CSS 文件。也可以在项目中使用构建工具（如 Webpack）来处理 LESS 文件。

4.优点

语法与CSS相似，学习成本低。

提供了变量、混合等功能，提高了代码的可维护性和可重用性。

5.缺点

相比于SASS和SCSS，功能相对较少。

社区资源和插件数量相对较少。

二、SASS

1.定义

SASS（Syntactically Awesome Style Sheets）是一种强大的 CSS 预处理器，它提供了更丰富的语法和功能，帮助开发者更高效地编写样式代码。

2.语法

2.1 缩进语法

     nav
       width: 100%
       ul
         list - style - type: none
         li
           float: left

2.2 SCSS语法（与CSS相似）

     nav {
       width: 100%;
       ul {
         list - style - type: none;
         li {
           float: left;
         }
       }
     }

2.3 变量

     $primary - color: #007BFF;
     $font - size: 16px;

     body {
       color: $primary - color;
       font - size: $font - size;
     }

2.4 混合

（1）定义混合：

       @mixin button - style {
         padding: 10px 20px;
         background - color: #007BFF;
         color: white;
         border - radius: 5px;
       }

       @mixin button - style2($padding - top, $padding - right, $padding - bottom, $padding - left) {
         padding: $padding - top $padding - right $padding - bottom $padding - left;
         background - color: #007BFF;
         color: white;
         border - radius: 5px;
       }

（2）调用混合：

     .myButton {
         @include button - style;
      }

     .myButton2 {
         @include button - style2(10px, 20px, 10px, 20px);
      }

2.5 函数

     @function darken - color($color, $amount) {
       @return darken($color, $amount);
     }

     $dark - color: darken - color(#007BFF, 10%);

2.6 条件判断

     @mixin responsive - layout($breakpoint) {
       @if $breakpoint == "small" {
         width: 100%;
       } @else if $breakpoint == "medium" {
         width: 70%;
       } @else {
         width: 50%;
       }
     }

2.7 循环

     @for $i from 1 through 4 {
     .column - #{$i} {
         width: ($i * 25%) - 20px;
       }
     }

3.使用方式

与 LESS 类似，可以通过命令行工具、构建工具（如 Webpack、Gulp 等）将 SASS 文件编译为 CSS 文件，然后在 HTML 中引入。

4.优点

功能强大，提供了丰富的函数、混合、条件判断、循环等功能。

有良好的社区支持和大量的插件可用。

5.缺点

缩进语法对于习惯传统 CSS 语法的开发者可能不太习惯。

编译过程相对复杂一些。

三、SCSS

1.定义

SCSS 是 SASS 的一种语法格式，它是 “Sassy CSS” 的缩写。它采用了与 CSS 非常相似的语法，同时继承了 SASS 的强大功能。

2.语法

与上述 SASS 的 SCSS 语法部分相同，包括变量、混合、函数、条件判断、循环等。

3.使用方式

同 SASS 的使用方式，通过编译工具将 SCSS 文件转换为 CSS 文件后在 HTML 中引入。

4.优点

语法与 CSS 相似，易于学习和过渡。

继承了 SASS 的强大功能，能够满足复杂项目的需求。

5.缺点

相比纯 CSS，增加了一些学习成本和编译步骤。

四、LESS、SASS（SCSS）的区别

1.语法风格

LESS 语法更接近 CSS，使用 @ 符号定义变量、函数等，混合的定义和调用方式也较为直观

SASS 有缩进语法和 SCSS 语法，缩进语法与传统 CSS 语法差异较大，SCSS 语法与 CSS 相似但功能更强大。

2.变量声明

在 LESS 中，变量声明后可以直接在样式规则中使用。

在 SASS（SCSS）中，变量使用 $ 符号声明，并且在使用时遵循其语法规则。

3.混合（Mixin）

LESS 和 SASS（SCSS）的混合功能类似，但在参数传递和使用方式上可能存在一些细微差别。

4.社区和资源：

SASS 由于出现较早，社区更加成熟，有更多的资源和插件可供选择。

LESS 也有一定的社区支持，但相对较少。

关于预处理器的介绍就到此结束，如果对前端开发的设计模式感兴趣的话，可以点开右下角“专栏目录”查看。码字不易，点个赞再走吧