编辑“︁CSS外部样式表”︁（章节）

== 高级应用 ==

=== 使用预处理器 ===
现代开发中常用Sass/Less等预处理器生成最终CSS：

<syntaxhighlight lang="scss">
// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';
.button {
    background: $primary-color;
    &:hover {
        background: darken($primary-color, 10%);
    }
}
</syntaxhighlight>

编译后生成的标准CSS：

<syntaxhighlight lang="css">
.button {
    background: #3498db;
}
.button:hover {
    background: #2980b9;
}
</syntaxhighlight>

=== 性能优化技巧 ===
1. '''文件合并'''：减少HTTP请求
   <syntaxhighlight lang="html">
   <!-- 替代多个link -->
   <link rel="stylesheet" href="combined.css">
   </syntaxhighlight>

2. '''媒体查询拆分'''：
   <syntaxhighlight lang="html">
   <link rel="stylesheet" href="print.css" media="print">
   </syntaxhighlight>

3. '''预加载关键CSS'''：
   <syntaxhighlight lang="html">
   <link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
   </syntaxhighlight>