CSS 进阶 - Ke.ke

🤖AI 摘要

文章介绍 CSS 进阶知识：

CSS 预处理器：扩展原生 CSS，支持变量等高级功能。Sass 功能强、社区大；LESS 与 CSS 接近。两者都支持变量、嵌套等特性，但语法有别。
CSS 动画与过渡：transition设置属性渐变效果，animation通过@keyframes定义帧动画。应用技巧包括动画组合、制作 loading 动画等，可用will-change提升性能。
自定义属性与变量：原生支持，在:root定义，用var()使用。可动态修改、支持作用域，与预处理器相比，能动态运行时改变且可被 JS 访问。
CSS - in - JS 与样式模块化：CSS - in - JS 将样式写在 JS 中，常见库有 styled - components 等，优势是样式作用域隔离、支持动态样式。样式模块化（如 CSS Modules）防止样式污染，自动生成唯一 class 名，适用于组件化开发。文章还对比了多种模块化样式方式在局部作用域、动态样式等方面的特点。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

1 .CSS 预处理器（Sass, LESS）#

概念#

CSS 预处理器是对原生 CSS 的扩展，支持变量、嵌套、函数、模块化等高级功能，编译成标准 CSS 使用。

常见预处理器#

名称	特点	使用方式
Sass（.scss/.sass）	功能最强，社区庞大，支持嵌套、变量、继承、MIXIN 等	推荐使用 SCSS 语法（兼容 CSS）
LESS（.less）	和 CSS 更接近，适用于较小项目	Ant Design 等 UI 框架使用

关键特性对比#

特性	Sass	LESS
变量	$primary-color	@primary-color
嵌套	支持	支持
Mixin（混入）	@mixin / @include	.mixin()
函数	强大内建函数库	基本函数
继承	@extend	()
运算	支持	支持

示例（Sass）：#

1
$main-color: #42b983;
2

3
.button {
4
  background: $main-color;
5
  &:hover {
6
    background: darken($main-color, 10%);
7
  }
8
}

2. CSS 动画与过渡#

transition（过渡）#

用于设置属性的渐变效果。

1
.button {
2
  transition: background-color 0.3s ease;
3
}

常用属性：
- transition-property：影响哪些属性
- transition-duration：过渡时间
- transition-timing-function：变化节奏（如 ease-in, linear）
- transition-delay：延迟时间

animation（动画）#

通过 @keyframes 定义帧动画。

1
@keyframes fadeIn {
2
  from { opacity: 0; }
3
  to { opacity: 1; }
4
}
5

6
.box {
7
  animation: fadeIn 1s ease-in-out forwards;
8
}

动画属性：
- animation-name
- animation-duration
- animation-iteration-count：次数或 infinite
- animation-delay
- animation-fill-mode：动画结束状态（forwards, backwards）
- animation-direction：正向、反向或交替

应用技巧：#

动画组合（多个属性过渡）
loading 动画（旋转、跳动）
页面进入/退出动效
使用 will-change 提升性能（提前告知浏览器）

3. 自定义属性与变量（CSS Variables）#

基本语法#

1
:root {
2
  --primary-color: #3498db;
3
  --padding: 1rem;
4
}
5

6
.button {
7
  color: var(--primary-color);
8
  padding: var(--padding);
9
}

优势#

原生支持、无需编译
支持 JS 动态修改：

1
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

支持作用域（在选择器内定义只作用于该范围）

与 Sass/LESS 区别#

特性	CSS 变量	Sass/LESS
动态运行时可变	✅	❌
嵌套作用域	✅	✅
JS 访问控制	✅	❌
条件逻辑	❌	✅（mixin、函数等）

4. CSS-in-JS 与样式模块化#

CSS-in-JS#

定义： 将样式写在 JavaScript 文件中，常用于 React 生态。

常见库#

名称	特点
styled-components	基于 tagged template literal，体验接近 Sass
Emotion	类似 styled-components，性能更好
JSS	高度可配置，React、Vue 都可用

示例（styled-components）：#

1
import styled from 'styled-components';
2

3
const Button = styled.button`
4
  background: ${props => props.primary ? 'palevioletred' : 'white'};
5
  color: ${props => props.primary ? 'white' : 'palevioletred'};
6
  padding: 0.5em 1em;
7
`;

优势#

样式作用域天然隔离
支持动态样式（通过 props 控制）
与组件逻辑绑定更紧密

样式模块化（CSS Modules）#

使用场景： 组件化开发时，防止样式污染。

1
.button {
2
  background-color: blue;
3
}
4
import styles from './styles.module.css';
5
<div className={styles.button}>按钮</div>

自动生成局部唯一 class 名称
支持传统 CSS 编写方式
推荐用于 Vue/React 项目中组件样式隔离

拓展：模块化样式方式对比#

技术	局部作用域	动态样式	开发体验	性能影响
Sass/LESS	❌	❌	很好	无影响
CSS Modules	✅	❌	很好	无影响
CSS Variables	✅	✅	一般	无影响
CSS-in-JS	✅	✅	非常好（组件式）	中等（运行时处理）