SCSS 语法基础 #

文件扩展名 #

Sass 支持两种文件扩展名：

扩展名 语法 说明
.scss SCSS CSS 兼容语法，推荐使用
.sass Sass 缩进语法，无大括号分号

本指南统一使用 .scss 扩展名。

CSS 兼容性 #

SCSS 是 CSS 的超集，这意味着：

  • 所有有效的 CSS 都是有效的 SCSS
  • 可以直接将 .css 文件重命名为 .scss
  • 渐进式迁移现有项目
scss 
/* 这是一段有效的 CSS，也是有效的 SCSS */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

注释 #

Sass 支持两种注释方式：

1. CSS 注释（多行注释） #

scss 
/* 
 * 这是 CSS 注释
 * 会出现在编译后的 CSS 中
 */
.container {
  width: 100%;
}

/* 单行 CSS 注释也会保留 */
.item {
  color: red;
}

编译后：

css 
/* 
 * 这是 CSS 注释
 * 会出现在编译后的 CSS 中
 */
.container {
  width: 100%;
}

/* 单行 CSS 注释也会保留 */
.item {
  color: red;
}

2. Sass 注释（单行注释） #

scss 
// 这是 Sass 注释
// 不会出现在编译后的 CSS 中
.container {
  width: 100%; // 行尾注释也不会出现
}

编译后：

css 
.container {
  width: 100%;
}

注释最佳实践 #

scss 
// ============================================
// 文件说明
// ============================================
// 
// 文件名：_buttons.scss
// 描述：按钮组件样式
// 作者：Your Name
// 日期：2026-03-28

// --------------------------------------------
// 变量定义
// --------------------------------------------

$btn-padding: 10px 20px;
$btn-radius: 4px;

// --------------------------------------------
// 基础按钮样式
// --------------------------------------------

.btn {
  /* 基础样式 */
  display: inline-block;
  padding: $btn-padding;
  border-radius: $btn-radius;
  
  // 状态样式
  &:hover {
    opacity: 0.8;
  }
}

特殊语法 #

1. 插值语法 #{} #

scss 
$name: "container";
$prop: "margin";

.#{$name} {
  #{$prop}: 0 auto;
}

// 编译后
.container {
  margin: 0 auto;
}

2. 父选择器 & #

scss 
.btn {
  color: blue;
  
  &:hover {
    color: darkblue;
  }
  
  &-primary {
    background-color: blue;
  }
  
  &-secondary {
    background-color: gray;
  }
}

// 编译后
.btn {
  color: blue;
}
.btn:hover {
  color: darkblue;
}
.btn-primary {
  background-color: blue;
}
.btn-secondary {
  background-color: gray;
}

3. 占位符选择器 % #

scss 
// 占位符选择器不会直接编译输出
%button-base {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;
  background-color: blue;
}

.btn-secondary {
  @extend %button-base;
  background-color: gray;
}

// 编译后
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: blue;
}

.btn-secondary {
  background-color: gray;
}

文件命名约定 #

部分文件（Partials） #

以下划线开头的文件不会被单独编译：

text 
styles/
├── _variables.scss    # 部分文件，不单独编译
├── _mixins.scss       # 部分文件，不单独编译
├── _reset.scss        # 部分文件，不单独编译
└── main.scss          # 主文件，会被编译

命名规范 #

类型 命名规则 示例
变量 小写 + 连字符 $primary-color
Mixin 小写 + 连字符 @mixin flex-center
函数 小写 + 连字符 @function get-color()
文件 小写 + 连字符 _button-styles.scss
占位符 小写 + 连字符 %button-base

文件结构 #

基础结构 #

text 
project/
├── src/
│   └── scss/
│       ├── abstracts/
│       │   ├── _variables.scss
│       │   ├── _mixins.scss
│       │   └── _functions.scss
│       ├── base/
│       │   ├── _reset.scss
│       │   └── _typography.scss
│       ├── components/
│       │   ├── _buttons.scss
│       │   └── _cards.scss
│       ├── layout/
│       │   ├── _header.scss
│       │   └── _footer.scss
│       ├── pages/
│       │   ├── _home.scss
│       │   └── _about.scss
│       └── main.scss
└── dist/
    └── css/
        └── main.css

主文件结构 #

scss 
// main.scss

// 1. 抽象层（变量、函数、混合宏）
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'abstracts/functions';

// 2. 基础样式
@use 'base/reset';
@use 'base/typography';

// 3. 布局
@use 'layout/header';
@use 'layout/footer';
@use 'layout/sidebar';

// 4. 组件
@use 'components/buttons';
@use 'components/cards';
@use 'components/forms';

// 5. 页面特定样式
@use 'pages/home';
@use 'pages/about';

编码声明 #

当文件包含非 ASCII 字符时，需要声明编码：

scss 
@charset "UTF-8";

$font-family: "微软雅黑", sans-serif;

.content {
  font-family: $font-family;
}

@import vs @use #

@import（旧语法，已弃用） #

scss 
// 不推荐使用
@import 'variables';
@import 'mixins';

@use（新语法，推荐） #

scss 
// 推荐使用
@use 'variables';
@use 'mixins';

// 使用命名空间
.button {
  color: variables.$primary-color;
  @include mixins.flex-center;
}

@use 的优势 #

特性 @import @use
命名空间 无 有
私有成员 不支持 支持
重复导入 多次加载 只加载一次
模块化 弱 强

编译输出格式 #

expanded（展开） #

css 
.container {
  width: 100%;
}

.container .item {
  color: red;
}

compressed（压缩） #

css 
.container{width:100%}.container .item{color:red}

nested（嵌套） #

css 
.container {
  width: 100%; }
  .container .item {
    color: red; }

compact（紧凑） #

css 
.container { width: 100%; }
.container .item { color: red; }

调试技巧 #

@debug 输出调试信息 #

scss 
$width: 100px;

.container {
  @debug "Width is: #{$width}";
  width: $width;
}

// 控制台输出：Debug: Width is: 100px

@warn 输出警告 #

scss 
@mixin set-width($width) {
  @if $width > 1000px {
    @warn "Width #{$width} may be too large for mobile devices";
  }
  width: $width;
}

@error 输出错误 #

scss 
@function get-color($name) {
  @if not map-has-key($colors, $name) {
    @error "Color #{$name} not found in $colors map";
  }
  @return map-get($colors, $name);
}

代码风格指南 #

缩进和空格 #

scss 
// 推荐：2 空格缩进
.container {
  width: 100%;
  padding: 20px;
  
  .item {
    color: red;
  }
}

// 属性声明后加分号
.element {
  display: block;
  margin: 0;
}

// 选择器和 { 之间加空格
.selector {
}

// 属性: 后加空格
.property: value;

属性顺序 #

scss 
.element {
  // 1. 定位
  position: absolute;
  top: 0;
  right: 0;
  
  // 2. 盒模型
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  
  // 3. 排版
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  
  // 4. 视觉效果
  background-color: #fff;
  border: 1px solid #ccc;
  
  // 5. 其他
  cursor: pointer;
  transition: all 0.3s;
}

下一步 #

掌握了 SCSS 基础语法后，继续学习 变量，开始使用 Sass 的强大功能！

最后更新：2026-03-28