sass基础语法

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，提供了比原生 CSS 更强大、更灵活的语法功能。它有两种语法格式：

• Sass（缩进语法，.sass 文件）
• SCSS（CSS-like 语法，.scss 文件），推荐使用 SCSS，因其更接近标准 CSS。

---

一、Sass/SCSS 基础语法

1. 变量（Variables）

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

---

2. 嵌套（Nesting）

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;
  }
}

编译为 CSS：

nav ul {
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
  color: #3498db;
}

---

3. 父选择器 &

a {
  color: blue;

  &:hover {
    color: red;
  }
}

编译为 CSS：

a {
  color: blue;
}
a:hover {
  color: red;
}

---

4. 混合宏（Mixins）

用于定义可复用的样式块：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

---

5. 函数（Functions）

可以自定义函数并返回值：

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}

body {
  font-size: calculate-rem(14px);
}

---

6. 导入（Import）

将多个 Sass 文件合并为一个 CSS 文件：

// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';

body {
  background-color: $primary-color;
}

⚠️ 注意：Sass 的 @import 已被弃用，建议使用 @use 和模块化方式（见下文）。

---

7. 模块化（@use / @forward）

// _colors.scss
$primary: #3498db;
$secondary: #e74c3c;

// main.scss
@use 'colors';

body {
  background: colors.$primary;
}

---

8. 继承（Extend）

通过 @extend 继承其他选择器的样式：

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.error {
  @extend .message;
  color: red;
}

---

9. 条件语句与循环

条件判断（if/else）

@mixin theme-color($theme) {
  @if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #333;
  }
}

.container {
  @include theme-color(dark);
}

循环（for / each）

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}

// 或者
$list: red, blue, green;
@each $color in $list {
  .btn-#{$color} {
    background: $color;
  }
}

---

二、Sass 编译方式

你可以使用以下工具将 .scss 文件编译为 .css 文件：

• Dart Sass（官方推荐）
• Node.js + sass-loader（配合 Webpack）
• VSCode 插件如 Live Sass Compiler

安装 Dart Sass：

npm install sass --save-dev

编译命令：

npx sass src/styles.scss dist/styles.css

---

三、使用建议

技巧	说明
使用 _filename.scss	下划线开头表示 partial 文件，不会单独编译
模块化组织结构	如 base/, components/, layout/, themes/ 等目录
使用占位符 %	避免无用类输出，只用于 @extend
变量命名规范	$spacing-sm, $font-title 等
使用 !default 设置默认值	$color: red !default;