你知道LESS 和 SCSS 的区别吗?哪个更适合你?

前言

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代码的可读性和可维护性。看完这篇文章,了解清楚二者之间的区别,在之后我们可以根据自己的需求选择适合自己的预处理器。

感谢各位小伙伴的阅读,最后祝你也祝我在今后日子里能够登高望远,心向彼岸😜😜😜

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro