css和scss以及less的区别

阿贾克斯的黎明

于 2024-07-26 22:27:13 发布

阅读量430

点赞数 4

分类专栏：前端文章标签： css scss less

本文链接：https://blog.csdn.net/m0_57836225/article/details/140725938

版权

前端专栏收录该内容

137 篇文章 0 订阅

订阅专栏

CSS：全称是 Cascading Style Sheets（层叠样式表），是用于描述网页外观的样式表语言。

SCSS：全称是 Sassy CSS，是 Sass 预处理器的一种语法格式。

“sassy”常见的释义为“粗鲁的”“无礼的”；也有“时髦且自信的”“漂亮的”“活泼的”等意思。例如：“She's a sassy girl.（她是个时髦又自信的女孩。）” “That was a sassy remark.（那是个无礼的评论。）”

Less：全称是 Less CSS。

“Less CSS”常见释义为“较少的 CSS”“精简的 CSS” ，Less 通常指的是一种 CSS 预处理器。

它们的区别主要包括以下几个方面：

语法：
- CSS 是基础的样式表语言，语法相对简单直接。
- SCSS 基于 CSS 的语法进行扩展，增加了变量、嵌套规则、混合（Mixin）、函数等特性，语法类似于 CSS，但更强大和灵活。
- Less 也有变量、嵌套、混合等特性，语法上与 SCSS 有一些差异，但总体功能相似。
变量：
- 三者都支持变量，但定义和使用的语法略有不同。
嵌套：
- CSS 不支持嵌套选择器，而 SCSS 和 Less 可以将相关的选择器嵌套在一起，使代码结构更清晰、更具层次。
函数和运算：
- SCSS 和 Less 都提供了一些内置函数和进行数学运算的能力，CSS 本身不具备。
编译：
- SCSS 和 Less 代码需要通过相应的预处理器编译为 CSS 才能在浏览器中使用。

总的来说，SCSS 和 Less 提供了更高级的特性和更高效的编写方式，帮助开发者更好地组织和维护样式代码，而 CSS 则是基础且广泛支持的标准样式语言。选择使用哪种取决于项目需求、团队偏好和个人习惯。

以下是一个简单的示例代码，用来说明 CSS、SCSS 和 Less 在定义变量和使用嵌套规则方面的区别：

CSS：

/* 定义颜色变量（在 CSS 中没有原生的变量支持，通常需要借助预处理器 ） */
/* 这里只是为了对比，模拟定义一个变量 */
:root {
  --primary-color: red;
}

/* 样式定义 */
div {
  color: var(--primary-color);
}

div ul {
  background-color: blue;
}

SCSS：

// 定义变量
$primary-color: red;

div {
  color: $primary-color;

  ul {
    background-color: blue;
  }
}

Less：

// 定义变量
@primary-color: red;

div {
  color: @primary-color;

  ul {
    background-color: blue;
  }
}

在上述示例中，您可以看到：

CSS 没有原生的变量和嵌套规则支持，需要使用 :root 来模拟变量。
SCSS 和 Less 都提供了更直观的变量定义方式（$ 符号用于 SCSS ， @ 符号用于 Less ），并且支持嵌套规则，使样式的组织更具结构性和逻辑性。

下面还有个例子：

CSS:

/* 定义颜色 */
.color-primary {
  color: red;
}

/* 定义边距 */
.margin {
  margin: 10px;
}

/* 应用样式 */
div {
  class: "color-primary margin";
}

SCSS：

// 定义变量
$primary-color: red;

// 定义混合（Mixin）
@mixin border-radius($radius) {
  border-radius: $radius;
}

// 嵌套规则
div {
  color: $primary-color;

  // 应用混合（Mixin）
  @include border-radius(10px);

  ul {
    background-color: blue;
  }
}

Less：

// 定义变量
@primary-color: red;

// 定义混合（Mixin）
.border-radius(@radius) {
  border-radius: @radius;
}

// 嵌套规则
div {
  color: @primary-color;

  // 应用混合（Mixin）
 .border-radius(10px);

  ul {
    background-color: blue;
  }
}

在这个示例中，您可以看到：

这里重点说一下这个混合器

@mixin 关键字用于定义 Mixin ，border-radius 是 Mixin 的名称，$radius 是参数。

在代码的其他地方，可以通过 @include border-radius(10px); 这样的方式来调用这个 Mixin ，并将 10px 作为参数传递给 $radius ，从而应用 border-radius: 10px; 这个样式规则。

Mixin 的主要作用是可以将一段可复用的样式代码封装起来，方便在多个地方重复使用，减少代码重复，提高代码的可维护性和可读性。

@include border-radius(10px); 这行代码是在调用之前定义的名为 border-radius 的 Mixin ，并向其传递参数 10px 。

这会将 border-radius: 10px; 这个样式规则应用到当前的选择器或元素上。