LESS、SASS 与 SCSS 预处理器详解
目录
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: left2.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 也有一定的社区支持，但相对较少。
关于预处理器的介绍就到此结束，如果对前端开发的设计模式感兴趣的话，可以点开右下角“专栏目录”查看。码字不易，点个赞再走吧
原文地址：https://blog.csdn.net/jxnd123456/article/details/142849490
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！