前言
LESS(Leaner Style Sheets)和SCSS(Sassy CSS)都是CSS预处理器,它们在原生CSS的基础上提供了额外的功能和语法,以使样式表的编写更加模块化、可维护和灵活。虽然它们的目标相似,但它们在语法和功能上有一些区别。本篇文章旨在让大家了解 LESS 和 SCSS 这两种工具的特点,分清二者的区别和特性,让大家能够选择出更适合的那一个。
简单介绍一下LESS 和 SCSS
LESS(编写简单且简洁)
LESS(Leaner Style Sheets)通过提供类似编程的方式来编写 CSS,扩展了原生 CSS 的功能。LESS 引入了诸如变量、混合(类似函数)、嵌套规则等特性,极大地提高了代码的可重用性和可维护性。LESS 与原生 CSS 兼容,可以通过编译器将 LESS 代码转换为普通的 CSS 代码,然后在浏览器中使用。因此,LESS 不仅保留了 CSS 的简单性和灵活性,还提供了更多强大的工具和特性,使得样式表的编写更加高效、灵活,并且更容易维护和复用。
SCSS(功能丰富且强大)
Sass 从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的CSS代码,这意味着任何有效的 CSS 代码都是合法的 SCSS 代码,这一代的Sass也被称为SCSS。SCSS 不仅保留了 LESS 的所有优点,还增加了更高级的功能,如条件语句、循环、函数等更高级的功能,使得样式表的编写更加灵活、强大,所以SCSS 更加适用于处理复杂项目中的样式需求。
LESS 和 SCSS 的区别
1. 实现方式
Less是基于JavaScript,是在客户端进行处理的;Sass是基于Ruby,是在服务器端进行处理的。
2. 变量的声明和使用
Less定义变量时使用前缀:@;Sass定义变量时使用前缀:$。
less
//Less定义变量:
@color: #4D926F;
div {
color: @color;
}
//Scss定义变量
$blue : #1875e7;
div {
color : $blue;
}
3. 变量插值
LESS 采用 @{xxxx} 的形式,SCSS 采用 ${xxxx} 的形式。
less
//Less
@primary-color: #333;
background-color: @{primary-color};
//Scss
$primary-color: #333;
background-color: #{$primary-color};
条件语句、循环、函数
SCSS 中增加了条件语句(if、if...else)和循环语句(for循环、while循环)还有自定义函数,LESS不支持。
scss
// if...else
$primary-color: #333;
button-style {
@if $primary-color == #333 {
background-color: red;
} @else {
background-color: blue;
}
}
//for循环
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i;
}
}
//自定义函数
@function double($number) {
@return $number * 2;
}
.element {
width: double(50px);
}
混合(Mixins)
定义 Mixin
- LESS 使用
.mixinName() {}
的语法定义来定义一个 Mixin,并且可以把任意的 CSS 规则作为 Mixin 使用
.mixinName() { property: value; }
。
- 在 SCSS 中,Mixin使用
@mixin
关键字定义。
@mixin mixinName { property: value; }
。
Mixin的调用
- 在 LESS 中,Mixin的调用使用
.
运算符,并且如果 Mixin 没有参数的话可以省略后面的圆括号
less
// 定义 Mixin
.buttonMixin(@color) {
background-color: @color;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
// 调用 Mixin
.button {
.buttonMixin(blue);
}
- 在 SCSS 中,Mixin的调用使用
@include
指令
scss
// 定义 Mixin
@mixin button($color) {
background-color: $color;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
// 调用 Mixin
.button {
@include button(blue);
}
Mixin的参数传递
如果存在多个参数的话,LESS 使用分号分隔;SCSS 使用逗号分隔,且两者都支持为参数设置默认值。
less
// less
.mixinName(@param1; @param2) {
// Mixin 内部代码
}
// 调用 Mixin 并传递多个参数
.element {
.mixinName(value1; value2);
}
//scss
@mixin mixinName($param1, $param2) {
// Mixin 内部代码
}
// 调用 Mixin 并传递多个参数
.element {
@include mixinName(value1, value2);
}
函数
1. 字符串函数
尽管SCSS和LESS都提供了字符串函数,但它们在一些细节上有所不同。
- 在LESS中,可以使用
e()
函数或~"string"
语法来进行CSS转义。例如,e("@{variable}")
会将变量转义为CSS字符串。 - 在SCSS中,并没有提供专门的CSS转义函数。相反,可以使用变量插值来实现相同的效果,如
#{$variable}
- SCSS通常提供更多的字符串函数,如
str-insert()
、str-slice()
等,使得对字符串的操作更加灵活。
假设我们想在CSS中使用一个包含特殊字符的字体名称,比如含有空格或者引号的字体名称。
在LESS中,我们可以使用~"string"
语法来转义:
less
@font: ~"Times New Roman";
而在SCSS中,我们可以使用变量插值来达到相同的效果:
scss
$font: "Times New Roman";
body {
font-family: #{$font};
}
这样做可以确保特殊字符在生成的CSS中被正确保留,而不会被解释为其他含义。
2. 颜色函数
调节色相,LESS 使用名为 spin() 的函数;SCSS 使用名为 adjust_hue() 的函数。
@base-color: #ff0000; .new-color { color: spin(@base-color, 120deg); // 将基础颜色旋转120度 }
$base-color: #ff0000; $new-color { color: adjust-hue($base-color, 120deg); // 将基础颜色旋转120度 }
引用父选择器 & 符号
在 SCSS 和 LESS 中,&
符号用于引用父选择器,通常在嵌套规则中使用。但是 SCSS 的 & 符号只能出现在一个组合选择器的开始位置,LESS 则没有这个限制。
less
// less
.bg-v(@color) {
background-color: @color;
a&:hover,
}
// scss
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
}
继承方式
- 在 LESS 中,使用
:extend()
函数来继承样式,继承的目标选择器需要作为参数传递给函数。 - 在 SCSS 中,使用
@extend
指令来继承样式,使用指令时,只需要指定要继承的目标选择器即可。
在LESS中:
csharp
// 定义基础样式
.base-style {
color: blue;
}
// 继承基础样式
.child-style {
&:extend(.base-style);
}
在SCSS中:
less
// 定义基础样式
.base-style {
color: blue;
}
// 继承基础样式
.child-style {
@extend .base-style;
}
总结 🌸🌸🌸
LESS 和 SCSS 都是非常优秀的CSS预处理器,SCSS 在功能上面比 LESS 更强大,LESS 却更简洁,容易上手,最重要的是两者都可以提高CSS代码的可读性和可维护性。看完这篇文章,了解清楚二者之间的区别,在之后我们可以根据自己的需求选择适合自己的预处理器。
感谢各位小伙伴的阅读,最后祝你也祝我在今后日子里能够登高望远,心向彼岸😜😜😜