CSS 与 SCSS 区别

前言

在学习前端开发的时候，看见很多代码都是定义样式的时候，都是用 .scss 格式为什么采用这种格式，为什么还可以定义这种关键字（!important等等）。于是乎就问了一下 ChatGPT，下面整理出来，方便大家了解。

CSS

CSS 是一种用于描述 HTML 或 XML 文档外观和格式的语言。它定义了页面的布局、颜色、字体等。

示例：

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
}

---

SCSS

SCSS 是 Sass（Syntactically Awesome Style Sheets）的扩展语法，是一种更强大、更灵活的 CSS 预处理器。SCSS 允许使用嵌套、变量、混合、继承等高级功能，从而简化了复杂样式的编写和管理。

示例：

$primary-color: blue;

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
}

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

.box {
  @include border-radius(10px);
  background: lighten($primary-color, 20%);
}

---

主要区别

1. 变量

• CSS: 不支持变量。
• SCSS: 支持使用 $ 符号定义变量，使得样式可以重用。

$primary-color: #333;
body {
  color: $primary-color;
}

2. 嵌套

• CSS: 不支持嵌套。
• SCSS: 支持嵌套，使得样式层次更加清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li { display: inline-block; }
  }
}

3. 混合（Mixins）

• CSS: 不支持混合。
• SCSS: 支持混合，使得代码更具复用性。

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

.box { @include border-radius(10px); }

4. 继承（Extend）

• CSS: 不支持继承。
• SCSS: 支持继承，可以减少冗余代码。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }

5. 操作符

• CSS: 不支持操作符。
• SCSS: 支持操作符，方便进行数学运算。

.container {
  width: 100%;
  padding: 5% + 10px;
}

6. 函数

• CSS: 仅支持有限的内置函数。
• SCSS: 支持多种内置函数和自定义函数。

$base-color: #036;
.element {
  color: lighten($base-color, 20%);
}

---

使用 SCSS 的优势

• 提高代码复用性: 变量、混合和继承使得样式代码可以重复使用，减少冗余。
• 更好的组织和维护: 嵌套和分割文件（partial）功能使得样式文件更具结构性，便于维护。
• 强大的功能: SCSS 提供了很多强大的功能，如数学运算、函数等，可以简化复杂的样式设计。

---

总结

虽然 CSS 是一个强大的样式设计工具，但 SCSS 提供了更多高级功能，使得编写和维护复杂的样式变得更加简单和高效。在大型项目中，SCSS 可以显著提高开发效率和代码可维护性。

---

扩展（LESS）

LESS 是一个 CSS 预处理器，它扩展了 CSS，并提供了一些高级功能，如变量、嵌套规则、混合、函数等。它与 SCSS 很多地方相似。

• LESS: 比较轻量级，适合简单到中等复杂度的项目。语法较为简单直接，但在某些高级功能上略显不足。
• SCSS: 功能强大，生态系统丰富，有大量的库和工具支持。适合中等到高复杂度的项目，尤其是需要复杂逻辑和功能的场景。