CSS 和 SCSS 有什么区别？

CSS（Cascading Style Sheets）是用于描述网页样式的语言，被用于调整页面元素的颜色、字体、大小、布局等等。但是，当样式表变得越来越大，或者当需要添加嵌套、变量和函数时，CSS 就显得不够灵活。这就是 SCSS 的出现的原因。

SCSS 是 CSS 的一种超集，提供了更多的功能和灵活性。SCSS 代码可以被编译成 CSS，所以 SCSS 天生就向后兼容。下面是 SCSS 和 CSS 的一些区别：

1. 变量和函数

SCSS 支持变量和函数的定义和使用，这使得代码变得模块化和易于维护。

// SCSS
$primary-color: #007bff;

body {
  color: $primary-color;
}

// CSS
body {
  color: #007bff;
}

2. 嵌套规则

SCSS 允许样式规则嵌套，这使得代码更易读、更易于维护。

// SCSS
nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 1rem;
    }
  }
}

// CSS
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 1rem;
}

3. 导入其他样式表

在 SCSS 中，可以使用 @import 指令导入其他样式表。这使得代码更易于组织和管理。

// SCSS
@import 'base';
@import 'layout';
@import 'components';

// CSS（编译后）
/* 在此处包含了 base.css、layout.css 和 components.css */

4. 操作符

SCSS 支持算术和逻辑操作符，让样式表更加动态。

// SCSS
.container {
  width: 100% / 3;
}

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

// CSS
.container {
  width: 33.33333%;
}

.btn:hover {
  color: #0062cc;
}

5. 注释

SCSS 支持多行注释和单行注释：

/* 单行注释 */

/*
 * 多行注释
 */

CSS 只支持单行注释：

/* 单行注释 */

总的来说，SCSS 提供了更多的功能和灵活性，使得样式表更易于组织和维护。但是，需要注意的是编写和编译 SCSS 代码需要额外的工具和环境。