css与scss

CSS 是网页样式的基础语言，语法简洁但功能单一；SCSS 是 CSS 的超集（属于 Sass 预处理器的一种语法格式），它在 CSS 的基础上增加了变量、嵌套、混合、继承等高级功能，写起来更高效、易维护，最终还需要编译成普通 CSS 才能被浏览器识别。

一、核心定义与关系

  1. CSS（层叠样式表）是浏览器原生支持的样式语言，用于描述 HTML 元素的显示样式，语法是 “选择器 + 声明块” 的形式，没有任何编程化的特性，属于纯样式描述语言。
  2. SCSS（Sassy CSS）是 Sass（Syntactically Awesome Style Sheets，CSS 预处理器）在版本 3.0 后推出的新语法，完全兼容 CSS 的语法（你可以把普通 CSS 代码直接复制到 SCSS 文件中，完全生效），同时增加了编程化的特性。另外，Sass 还有一种老语法（缩进语法，后缀为.sass），但现在SCSS（后缀.scss）是主流，因为它和 CSS 语法更接近，学习成本更低。

二、关键区别（附代码示例）

1. 语法格式

  • CSS：必须严格使用大括号{}包裹声明，分号;结尾，没有嵌套的语法糖（只能重复写选择器）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* CSS写法 */
    .container {
      width: 1200px;
      margin: 0 auto;
    }
    .container .header {
      height: 80px;
      background: #fff;
    }
    .container .header .logo {
      width: 100px;
    }

SCSS：兼容 CSS 语法，同时支持嵌套语法（可以把子选择器写在父选择器内部），代码结构更清晰，减少重复代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* SCSS写法（嵌套） */
.container {
  width: 1200px;
  margin: 0 auto;

  // 嵌套子选择器
  .header {
    height: 80px;
    background: #fff;

    // 继续嵌套孙选择器
    .logo {
      width: 100px;
    }
  }
}

2. 变量支持

  • CSS：CSS3 也支持变量，但语法繁琐（需要用--变量名定义，var(--变量名)使用），且功能有限。

  • /* CSS变量 */
:root {
  --main-color: #2c3e50;
  --font-size: 16px;
}
.box {
  color: var(--main-color);
  font-size: var(--font-size);
}

    1
    2
    3
    4
    5

      

    **SCSS**：支持更简洁的变量定义（`$变量名: 值;`），可以在任何地方使用，还能进行运算。

    
/* SCSS变量 */
$main-color: #2c3e50;
$font-size: 16px;
$box-width: 200px;

.box {
color: $main-color;
font-size: $font-size;
width: $box-width + 50px; // 支持运算，最终宽度为250px
}

1
2
3
4
5
6
7
8
9
10

#### 3. 混合（Mixin）与继承

- **CSS**：没有混合和继承的概念，相同的样式只能重复写，或者用 CSS 的`@extend`（但兼容性和功能远不如 SCSS）。

- **SCSS**：

  - **Mixin**：可以定义可复用的样式块，还能传递参数，类似函数。
  - **继承**：用`@extend`继承其他选择器的样式，减少代码冗余。

/* SCSS Mixin（带参数） */
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
justify-content: center;
align-items: center;
}

/* 继承的基础样式 */
.base-box {
padding: 10px;
border: 1px solid #eee;
}

.card {
@extend .base-box; // 继承base-box的样式
@include flex-center; // 使用mixin，默认row方向
background: #fff;
}

.form {
@extend .base-box;
@include flex-center(column); // 传递参数，column方向
}




#### 4. 编译与运行

- **CSS**：浏览器可以直接识别和执行，无需额外处理。
- **SCSS**：浏览器无法直接识别，必须通过编译工具（如 Sass CLI、Webpack、Vite、Gulp 等）编译成普通 CSS 文件后，才能在网页中使用。