less和sass基本使用
变量
变量在LESS和SASS中都以@符号定义，可以在全局范围内使用，也可以在局部范围内定义和使用。
LESS示例：
@primary-color: #3498db;
@padding: 15px;
.article {
background-color: @primary-color;
padding: @padding;
}
SASS示例：
$primary-color: #3498db;
$padding: 15px;
.article {
background-color: $primary-color;
padding: $padding;
}
使用变量可以轻松地统一修改样式，提高代码的可维护性。
混合（Mixins）
混合允许你定义可复用的CSS代码块，然后在多个地方调用这些代码块。
LESS示例：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.article {
.border-radius(10px);
}
SASS示例：
@mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.article {
@include border-radius(10px);
}
通过混合，我们可以避免重复编写相同的CSS代码，提高代码的复用性。
嵌套规则
嵌套规则允许你将CSS规则嵌套在其他规则内部，使得结构更加清晰，易于理解。
LESS示例：
.article {
h1 {
color: #e74c3c;
}
p {
font-size: 16px;
}
}
SASS示例：
.article {
h1 {
color: #e74c3c;
}
p {
font-size: 16px;
}
}
在LESS和SASS中，嵌套规则的写法非常相似，都使得CSS的结构更加接近HTML的结构。
内置函数
LESS和SASS都提供了大量的内置函数，用于处理颜色、字符串、数学运算等。
LESS示例：
@base-color: #f39c12;
@text-color: darken(@base-color, 30%);
.article {
color: @text-color;
}
SASS示例：
$base-color: #f39c12;
$text-color: darken($base-color, 30%);
.article {
color: $text-color;
}
内置函数使得样式的动态生成变得更加简单。
导入
导入功能允许你将多个CSS文件合并为一个，减少HTTP请求，提高页面加载速度。
LESS示例：
@import "variables.less";
@import "mixins.less";
@import "base.less";
SASS示例：
@import 'variables';
@import 'mixins';
@import 'base';
通过导入，我们可以将庞大的CSS项目分解为多个模块，提高代码的可读性和可维护性。
继承
继承允许一个选择器继承另一个选择器的样式，减少代码重复。
LESS示例：
.article {
font-family: 'Open Sans', sans-serif;
}
.featured {
.article;
font-weight: bold;
}
SASS示例：
.article {
font-family: 'Open Sans', sans-serif;
}
.featured {
@extend .article;
font-weight: bold;
}
继承使得我们可以在保持样式一致性的同时，减少代码的重复。
参考文章：
javascript - Sass(Scss)、Less的区别与选择 + 基本使用 - 个人文章 - SegmentFault 思否
Sass和Less（预处理器）「建议收藏」-腾讯云开发者社区-腾讯云 (tencent.com)
原文地址：https://blog.csdn.net/2301_78796401/article/details/142931572
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！