# 使用 npm 安装（推荐）
npm install -D sass
 
# 使用 pnpm 安装
pnpm add -D sass
 
# 使用 yarn 安装
yarn add -D sass
 
# 全局安装 CLI
npm install -g sass

# 编译单个文件
sass input.scss output.css
 
# 监听文件变化
sass --watch input.scss output.css
 
# 压缩输出
sass --style=compressed input.scss output.css
 
# 编译整个目录
sass --watch src/styles:dist/styles

# Vite 内置支持 SCSS，只需安装 sass
pnpm add -D sass

// vite.config.js（可选自定义配置）
import { defineConfig } from 'vite'
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/styles/variables" as *;`,
        api: 'modern-compiler', // Vite 5.4+ 支持
      },
    },
  },
})

pnpm add -D sass sass-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              api: 'modern',
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
}

// variables.scss
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$spacing-unit: 8px;
 
// 嵌套语法
.nav {
  background-color: $primary-color;
  font-family: $font-stack;
 
  // 父选择器引用
  &__item {
    padding: $spacing-unit * 2;
    color: white;
 
    &:hover {
      color: lighten($primary-color, 20%);
    }
 
    &--active {
      font-weight: bold;
      border-bottom: 2px solid white;
    }
  }
}
 
// Mixin
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 1024px) { @content; }
  }
}
 
.card {
  padding: $spacing-unit * 3;
  @include responsive(mobile) {
    padding: $spacing-unit;
  }
}

$primary: #3498db;
$font-size-base: 16px;
 
.button {
  color: $primary;
  font-size: $font-size-base;
}

.container {
  max-width: 1200px;
 
  .header {
    display: flex;
    align-items: center;
 
    // 父选择器引用
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
 
    // 属性嵌套
    font: {
      family: 'Arial', sans-serif;
      size: 14px;
      weight: bold;
    }
  }
}

// 带参数的 Mixin
@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}
 
// 使用 Mixin
.modal {
  @include flex-center(column);
}
 
// 带可选参数的 Mixin
@mixin button-variant($bg, $color: white, $radius: 4px) {
  background: $bg;
  color: $color;
  border-radius: $radius;
}

%button-base {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
 
.btn-primary {
  @extend %button-base;
  background: #3498db;
}
 
.btn-danger {
  @extend %button-base;
  background: #e74c3c;
}

@mixin theme($theme) {
  @if $theme == dark {
    background: #333;
    color: white;
  } @else if $theme == light {
    background: white;
    color: #333;
  } @else {
    @error "Unknown theme: #{$theme}";
  }
}

// @for 循环
@for $i from 1 through 4 {
  .col-#{$i} {
    width: 25% * $i;
  }
}
 
// @each 循环
$sizes: (sm: 12px, md: 16px, lg: 24px);
@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}
 
// @while 循环
$i: 6;
@while $i > 0 {
  .h#{$i} { font-size: 12px + $i * 2; }
  $i: $i - 1;
}

$base-size: 16px;
 
.container {
  width: 100% - 20px;
  padding: $base-size / 2;
  margin: 10px + 5px;
}

// 颜色函数
$lighter: lighten(#3498db, 20%);
$darker: darken(#3498db, 20%);
$transparent: rgba(#3498db, 0.5);
$mix-color: mix(#3498db, #e74c3c, 50%);
 
// 字符串函数
$str: to-upper-case('hello');
$joined: join('hello', 'world', '-');
 
// 列表和映射
$list-length: length(1px 2px 3px); // 3
$map-get: map-get((sm: 12px, md: 16px), md); // 16px
 
// 选择器函数
$selector: selector-nest('.parent', '.child');

// _variables.scss（部分文件，以下划线开头）
$primary: #3498db;
$secondary: #2ecc71;
 
// _mixins.scss
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'mobile' {
    @media (max-width: 768px) { @content; }
  }
}
 
// main.scss
@use 'variables' as *;
@use 'mixins' as *;
 
.button {
  color: $primary;
  @include respond-to('mobile') {
    width: 100%;
  }
}

// _framework.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';
 
// 消费者只需
@use 'framework';
// 即可访问所有转发的成员

$themes: (
  light: (
    bg: #ffffff,
    text: #333333,
    primary: #3498db,
  ),
  dark: (
    bg: #1a1a1a,
    text: #ffffff,
    primary: #5dade2,
  ),
);

# GitHub Actions 示例
- name: Install dependencies
  run: pnpm install
 
- name: Build CSS
  run: pnpm sass --style=compressed src/styles/main.scss:dist/styles/main.css
 
- name: Lint SCSS
  run: pnpm stylelint "src/**/*.scss"

// ❌ 旧方式（已废弃）
@import 'variables';
@import 'mixins';
 
// ✅ 新方式
@use 'variables' as *;
@use 'mixins' as mixins;

// ❌ 过深嵌套
.page {
  .container {
    .header {
      .nav {
        .item {
          .link { color: blue; }
        }
      }
    }
  }
}
 
// ✅ 扁平化 + BEM
.page-container { max-width: 1200px; }
.header-nav { display: flex; }
.header-nav__item { padding: 8px; }
.header-nav__link { color: blue; }

// _tokens.scss
$colors: (
  'primary': (50: #eff6ff, 500: #3b82f6, 900: #1e3a8a),
  'gray': (50: #f9fafb, 500: #6b7280, 900: #111827),
);
 
@function color($name, $shade: 500) {
  @return map-get(map-get($colors, $name), $shade);
}