Sass vs Less：前端开发者的首选，你选哪个？

阿珊和她的猫

于 2024-09-29 08:30:00 发布

阅读量975

点赞数 26

文章标签： sass less rust

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142502448

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

Sass 和 Less

Sass 和 Less

背景

在前端开发中，CSS 是网页设计的核心语言。然而，随着项目变得日益复杂，传统的 CSS 文件管理和维护困难，尤其是在大型项目中。为了提升 CSS 的灵活性、可维护性和可读性，CSS 预处理器应运而生，其中最流行的两种是 Sass 和 Less。

Sass 和 Less 的介绍

Sass（Syntactically Awesome Style Sheets）：Sass 是一种扩展了 CSS 的预处理器，提供了变量、嵌套、混合、继承等功能。Sass 有两种语法：一种是传统的 Sass（缩进式），另一种是 SCSS（类似于 CSS 的语法）。
Less：Less 是一个动态样式表语言，也扩展了 CSS，允许使用变量、嵌套、混合和函数。Less 的语法更接近 CSS，使用简单，易于上手。

原理

Sass 的原理

编写 Sass 代码：开发者使用 Sass 或 SCSS 语法编写样式。
编译：使用 Sass 编译器将 Sass 代码编译成标准的 CSS。
输出 CSS：编译器输出的 CSS 文件可以被浏览器直接加载和使用。

Less 的原理

编写 Less 代码：开发者使用 Less 语法编写样式文件。
编译：使用 Less 编译器把 Less 代码转换为标准的 CSS。
输出 CSS：编译后的 CSS 文件可以直接安装在 HTML 文件中。

特点

Sass 的特点

变量：可以使用 $ 前缀定义变量，存储常用的颜色、字体等样式。
嵌套：支持选择器的嵌套，让样式层次关系更加清晰。
混合宏（Mixins）：允许将样式集合存储为可重用的函数。
继承：支持继承的特性，避免重复代码。
条件与循环：Sass 支持条件判断和循环功能，增强了逻辑处理能力。

Less 的特点

变量：使用 @ 前缀定义变量，功能与 Sass 的变量类似。
嵌套：支持选择器的嵌套，增强了样式的结构性。
混合（Mixins）：可定义可复用的样式组合，与 Sass 的混合功能相似。
运算功能：Less 支持基本的数学运算，如加减乘除。
易于学习：由于语法类似于 CSS，Less 对初学者更友好。

代码案例

以下是 Sass 和 Less 的一个简单示例。

Sass 示例

目录结构：

my-project
├── styles
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── main.scss
└── index.html

_variables.scss（定义变量）：

$primary-color: #3498db;
$font-stack: 'Helvetica', sans-serif;

_mixins.scss（定义混合宏）：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

main.scss（主样式文件）：

@import 'variables';
@import 'mixins';

body {
  font-family: $font-stack;
  background-color: $primary-color;

  h1 {
    color: white;
  }

  .button {
    @include border-radius(5px);
    background-color: darken($primary-color, 10%);
    padding: 10px 20px;
    color: white;
  }
}

Less 示例

目录结构：

my-project
└── styles
    ├── variables.less
    ├── mixins.less
    └── main.less

variables.less（定义变量）：

@primary-color: #3498db;
@font-stack: 'Helvetica', sans-serif;

mixins.less（定义混合宏）：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

main.less（主样式文件）：

@import 'variables.less';
@import 'mixins.less';

body {
  font-family: @font-stack;
  background-color: @primary-color;

  h1 {
    color: white;
  }

  .button {
    .border-radius(5px);
    background-color: darken(@primary-color, 10%);
    padding: 10px 20px;
    color: white;
  }
}