让你说一说Sass、Less 的区别是什么,你知道吗?
引言
Sass和Less是两种常见的CSS预处理器,它们都是CSS的一种抽象层,可以增加CSS代码的复用性,层级,mixin,变量,循环,函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似,但是它们之间存在一些区别。
我们在面试的时候就可能会遇到这样的一个问题,我们可能被问到是否了解过,使用过Sass和Less,而它们的区别又在哪?可能你知道但是又不太清晰,或者并不知道。
那让我们一起来看看它们俩到底有什么区别吧:
1. 编译环境不同
Sass是在服务端处理的,需要使用编译工具将Sass代码编译成CSS文件。目前常用的编译工具有Dart-Sass和Node-Sass。举个例子,如果我们有一个Sass文件“style.scss”,我们可以使用Dart-Sass编译成CSS文件“style.css”的命令,就像这样:
sass style.scss style.css
而Less则需要在客户端使用JavaScript引入Less文件,并使用Less.js将Less代码编译成CSS文件。举个例子,如果我们有一个Less文件“style.less”,我们就可以使用以下代码在HTML文件中引入Less文件:
<link rel="stylesheet/less" href="style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
2. 变量符不同
Sass使用$作为变量符,而Less使用@。举个例子,在Sass中,我们可以这样定义一个变量:
$primary-color: #f00;
而在Less中,我们可以这样定义一个变量:
@primary-color: #f00;
3. 条件语句不同
Sass支持条件语句,可以使用if{}else{},for{}循环等等。举个例子,在Sass中,我们可以这样定义一个条件语句:
$condition: true;
@if $condition {
// do something...
} @else {
// do something else...
}
而在Less中,没有类似的条件语句。但是Less支持使用JavaScript表达式来实现类似的效果。举个例子,在Less中,我们可以这样定义一个JavaScript表达式:
@condition: true;
.some-class {
color: ~`@{condition} ? "#f00" : "#0f0"`; // 使用JavaScript表达式
}
4. 代码风格不同
Sass和Less都是CSS预处理器,它们的代码风格非常相似,但是有一些细微的差别。
其中一个主要的区别是变量声明的方式。在Sass中,变量使用$
符号声明,而在Less中,变量使用@
符号声明。例如,在Sass中,我们可以这样声明一个变量:
$primary-color: #007bff;
而在Less中,我们可以这样声明一个变量:
@primary-color: #007bff;
Sass和Less在嵌套规则中使用父元素选择器的方式有这样一些区别:
- Sass使用
&
符号来表示父元素选择器,例如:
.parent {
color: blue;
&:hover {
color: red;
}
.child {
font-weight: bold;
}
}
在上面的Sass代码中,&:hover
表示.parent:hover
,.child
表示.parent .child
。
- Less使用
&
符号也可以用来表示父元素选择器,也但是可以使用@
符号来表示父元素选择器的变量,例如:
.parent {
color: blue;
&:hover {
color: red;
}
@selector: ~"&";
@{selector} .child {
font-weight: bold;
}
}
在上面的Less代码中,&:hover
表示.parent:hover
和sass
是类似的,@selector: ~"&";
表示将&
符号赋值给@selector
变量,@{selector} .child
表示.parent .child
。需要注意的是,在Less中,如果要在选择器中使用变量,需要使用@{}
语法将变量包裹起来。
最后,Sass和Less在使用Mixin时也有一些差别。在Sass中,Mixin使用@mixin
声明,而在Less中,Mixin使用.mixin
声明。例如,在Sass中,我们可以这样定义一个Mixin:
@mixin button-styles {
border: none;
padding: 10px 20px;
font-size: 1rem;
}
而在Less中,我们可以这样定义一个Mixin:
.button-styles() {
border: none;
padding: 10px 20px;
font-size: 1rem;
}
5. 继承方式不同
Sass和Less都支持CSS的继承方式,但是它们之间的实现方式不同。Sass使用“@extend”语句实现继承,而Less使用“:extend()”方法实现继承。举个例子,在Sass中,我们可以这样实现继承:
.parent {
color: #f00;
}
.child {
@extend .parent; // 使用@extend语句实现继承
font-size: 16px;
}
而在Less中,我们可以这样实现继承:
.parent {
color: #f00;
}
.child {
&:extend(.parent); // 使用:extend()方法实现继承
font-size: 16px;
}
总结
Sass和Less都是非常有用的CSS预处理器,它们可以提高CSS代码的可读性和可维护性。它们之间的区别在于编译环境、变量符、条件语句、代码风格和继承方式等方面。我们可以根据自己的需求选择适合自己的预处理器。
我们在这里只简单介绍了一下它们之间的区别,让你在遇到这样的一个问题的时候不至于手足无措,能够稍微整理一下思路。当然,如果你想学习更多有关Sass和Less的知识的话可以仔细参考官方文档和相关教程。
那么这篇文章就到这里结束啦~
如果你想了解更多这类文章,点赞关注作者更新更多~