CSS预处理器基础知识

在 CSS 的基础上添加了编程特性（变量、嵌套、函数、混入等），然后通过编译转换为标准的 CSS 代码。
完整的名字：Sass/SCSS

SCSS 最常用功能速学指南

---

一、变量（Variables）- 最最常用

// 定义变量：$
$primary-color: #1890ff;
$font-size-base: 14px;
$border-radius: 4px;

// 使用变量
.button {
  color: $primary-color;
  font-size: $font-size-base;
  border-radius: $border-radius;
}

实际场景：主题色管理

// _variables.scss
$theme: (
  primary: #1890ff,
  success: #52c41a,
  warning: #faad14,
  danger: #f5222d
);

$spacing: 8px;
$spacing-large: $spacing * 2; // 16px

---

二、嵌套（Nesting）- 告别重复写父级

// 原生 CSS
.navbar {
  background: #333;
}
.navbar ul {
  margin: 0;
}
.navbar ul li {
  list-style: none;
}

// SCSS 嵌套
.navbar {
  background: #333;
  
  ul {
    margin: 0;
    
    li {
      list-style: none;
      
      a {
        color: white;
      }
    }
  }
}

& 符号（引用父选择器）⭐⭐⭐

.button {
  background: blue;
  
  &:hover {  // 编译为 .button:hover
    background: darkblue;
  }
  
  &--large {  // 编译为 .button--large（BEM命名）
    padding: 20px;
  }
  
  &::before {  // 编译为 .button::before
    content: "→";
  }
}

BEM 命名最佳实践：

.card {
  &__title { }      // .card__title
  &__content { }    // .card__content
  &--featured { }   // .card--featured
}

---

三、部分文件和导入（Partial & Import）- 模块化

// _variables.scss   (文件名以下划线开头，不会编译成独立CSS)
$primary: #1890ff;

// _buttons.scss
.button { 
  color: $primary; 
}

// main.scss (主文件)
@import 'variables';  // 可以省略下划线
@import 'buttons';
@import 'header';
@import 'footer';

// 最终只编译 main.css

推荐项目结构：

styles/
├── main.scss          # 主文件
├── _variables.scss    # 变量
├── _mixins.scss       # 混入
├── _base.scss         # 重置、全局样式
├── components/
│   ├── _buttons.scss
│   └── _forms.scss
└── layouts/
    ├── _header.scss
    └── _footer.scss

---

四、混入（Mixins）- 复用代码块 ⭐⭐⭐

// 定义混入：@mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// 使用混入：@include
.container {
  @include flex-center;
}

.card {
  @include box-shadow(0, 2px, 4px, rgba(0,0,0,0.1));
}

带默认参数的混入（最实用）

@mixin button-variant($bg: blue, $color: white) {
  background: $bg;
  color: $color;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background: darken($bg, 10%);
  }
}

// 使用
.btn-primary {
  @include button-variant(#1890ff);
}

.btn-success {
  @include button-variant(#52c41a);
}

.btn-default {
  @include button-variant(#f0f0f0, #333);  // 覆盖默认值
}

常用混入库（直接复制使用）

// 1. 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 2. 文本溢出
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 3. 多行文本溢出
@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 4. 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

---

五、继承（Extend）- 共享样式

// 基础样式
%message-shared {  // 使用 % 定义占位符（不编译）
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

.message {
  @extend %message-shared;  // 继承
  background: #f0f0f0;
}

.success {
  @extend %message-shared;
  background: #d4edda;
  border-color: #28a745;
}

.error {
  @extend %message-shared;
  background: #f8d7da;
  border-color: #dc3545;
}

编译结果：

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
.message { background: #f0f0f0; }
.success { background: #d4edda; border-color: #28a745; }
.error { background: #f8d7da; border-color: #dc3545; }

Mixin vs Extend 选择

• Mixin：需要传参、生成不同代码 → 用 @mixin
• Extend：完全相同的样式、不需要参数 → 用 @extend

---

六、运算（Operations）

$base-padding: 8px;
$base-font: 14px;

.card {
  padding: $base-padding * 2;        // 16px
  margin: $base-padding + 4px;       // 12px
  font-size: $base-font + 2px;       // 16px
  width: 100% / 3;                   // 33.33333%
}

// 颜色运算
$primary: #1890ff;
.button {
  background: $primary;
  border-color: $primary - #222;     // 变暗
  box-shadow: 0 0 5px $primary + #333; // 变亮
}

// 更推荐用函数
.button {
  background: $primary;
  border-color: darken($primary, 10%);
  box-shadow: 0 0 5px lighten($primary, 20%);
}

---

七、常用内置函数

$color: #1890ff;

// 颜色函数
darken($color, 10%)    // 变暗10%
lighten($color, 10%)   // 变亮10%
rgba($color, 0.5)      // 添加透明度
saturate($color, 20%)  // 增加饱和度
desaturate($color, 20%) // 降低饱和度

// 数字函数
percentage(0.5)        // 50%
round(1.6)             // 2
floor(1.6)             // 1
ceil(1.2)              // 2
min(10px, 20px)        // 10px
max(10px, 20px)        // 20px

// 字符串函数
unquote("hello")       // hello (去掉引号)
quote(hello)           // "hello" (添加引号)

// 实际应用
.button {
  background: $color;
  
  &:hover {
    background: darken($color, 10%);
  }
  
  &:active {
    background: darken($color, 20%);
  }
  
  &--disabled {
    background: rgba($color, 0.5);
  }
}

---

八、实战：一个完整的按钮组件

// _variables.scss
$primary: #1890ff;
$success: #52c41a;
$danger: #f5222d;
$border-radius: 4px;

// _mixins.scss
@mixin button-base {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    opacity: 0.8;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@mixin button-variant($bg, $color: white) {
  background: $bg;
  color: $color;
  
  &:hover {
    background: darken($bg, 10%);
  }
}

// _buttons.scss
.btn {
  @include button-base;
  
  &-primary {
    @include button-variant($primary);
  }
  
  &-success {
    @include button-variant($success);
  }
  
  &-danger {
    @include button-variant($danger);
  }
  
  &-large {
    padding: 12px 24px;
    font-size: 16px;
  }
  
  &-small {
    padding: 4px 12px;
    font-size: 12px;
  }
}

// main.scss
@import 'variables';
@import 'mixins';
@import 'buttons';

使用：

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success btn-large">成功大按钮</button>
<button class="btn btn-danger btn-small">危险小按钮</button>