CSS 预处理器与后处理器

// 基础变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size-base: 16px;
$spacing-unit: 8px;

// 用 map 管理一整套颜色（比一堆散变量更好维护）
$theme-colors: (
  'primary': #007bff,
  'success': #28a745,
  'danger':  #dc3545,
  'warning': #ffc107
);

// 嵌套选择器 + BEM
.card {
  background-color: white;
  border-radius: 8px;
  padding: $spacing-unit * 2;

  &__header {
    padding: $spacing-unit;
    border-bottom: 1px solid #eee;

    &--highlight {
      background-color: $primary-color;
      color: white;
    }
  }

  &__body {
    padding: $spacing-unit * 2;

    p {
      margin: 0 0 $spacing-unit 0;
      line-height: 1.6;
    }
  }

  &__footer {
    padding: $spacing-unit;
    border-top: 1px solid #eee;
    text-align: right;

    .button {
      margin-left: $spacing-unit;
    }
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

@use 'sass:color';

// 带默认参数的按钮混合
@mixin button($bg-color: $primary-color, $text-color: white) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: color.adjust($bg-color, $lightness: -10%);
  }

  &:active {
    transform: translateY(1px);
  }
}

.button-primary   { @include button(); }
.button-secondary { @include button($secondary-color); }
.button-success   { @include button(#28a745); }

// 用 @content 封装响应式断点，业务里只写"我要在小屏做什么"
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'small' {
    @media (max-width: 640px) { @content; }
  } @else if $breakpoint == 'medium' {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == 'large' {
    @media (max-width: 1024px) { @content; }
  } @else {
    @error 'Unknown breakpoint: #{$breakpoint}';
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  @include respond-to('small')  { padding: 10px; }
  @include respond-to('medium') { padding: 15px; }
}

@use 'sass:math';

// @each 遍历 map 批量生成主题色类
$theme-colors: (
  'primary': #007bff,
  'success': #28a745,
  'danger':  #dc3545
);

@each $name, $color in $theme-colors {
  .text-#{$name} { color: $color; }
  .bg-#{$name}   { background-color: $color; }
}

// @for 生成 12 栅格
@for $i from 1 through 12 {
  .col-#{$i} {
    width: math.percentage(math.div($i, 12));
  }
}

// 自定义函数：根据背景色自动返回可读的文字色
@function contrast-color($bg) {
  @if (lightness($bg) > 50%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

.badge {
  $bg: #007bff;
  background: $bg;
  color: contrast-color($bg);
}

// _variables.scss
$primary: #007bff;
$radius: 4px;

// _mixins.scss
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// index.scss —— 统一入口，@forward 把子模块转发出去
// @forward 'variables';
// @forward 'mixins';

// main.scss —— 业务里带命名空间使用，不会污染全局
@use 'variables' as v;
@use 'mixins' as m;

.modal {
  @include m.center;
  border-radius: v.$radius;
  background: v.$primary;
}

@primary-color: #007bff;
@spacing: 8px;

// 普通混合
.rounded(@radius: 4px) {
  border-radius: @radius;
}

// 带 guard（条件）的混合
.text-mode(@mode) when (@mode = dark) {
  color: #fff;
  background: #1a1a1a;
}
.text-mode(@mode) when (@mode = light) {
  color: #212529;
  background: #fff;
}

.card {
  .rounded(8px);
  .text-mode(light);
  padding: @spacing * 2;

  &:hover {
    // 内置颜色函数
    background: lighten(@primary-color, 40%);
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    // 1) 先内联 @import 引入的文件
    require('postcss-import'),

    // 2) 让未来的 CSS 语法现在就能写（嵌套、自定义媒体查询等）
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-media-queries': true
      }
    }),

    // 3) 自动添加浏览器前缀
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
    }),

    // 4) 最后压缩（生产环境）
    process.env.NODE_ENV === 'production'
      ? require('cssnano')({ preset: 'default' })
      : false
  ].filter(Boolean)
};

/* 你写的源码 */
.box {
  display: flex;
  user-select: none;
  backdrop-filter: blur(8px);
}

/* autoprefixer 编译后（示意，前缀取决于目标浏览器） */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

@use 'sass:list';
@use 'sass:map';

// list 操作
$sizes: 8px, 16px, 24px, 32px;
$first: list.nth($sizes, 1);          // 8px（索引从 1 开始！）
$len: list.length($sizes);            // 4
$more: list.append($sizes, 40px);     // 追加

// map 操作
$config: (
  'radius': 8px,
  'shadow': 0 2px 4px rgba(0,0,0,.1),
  'z-modal': 1050,
);
$r: map.get($config, 'radius');       // 8px
$has: map.has-key($config, 'shadow'); // true
$merged: map.merge($config, ('radius': 12px)); // 覆盖式合并

// null 的妙用：条件性输出声明
@mixin maybe-border($color: null) {
  border: if($color, 1px solid $color, null); // color 为 null 时不输出 border
}

@use 'sass:math';
@use 'sass:color';
@use 'sass:string';

.demo {
  // 除法必须用 math.div（Sass 2.0 后 / 不再是除法）
  width: math.percentage(math.div(8, 12));  // 66.6667%
  // 颜色处理：scale 按比例，adjust 按绝对量
  background: color.scale(#007bff, $lightness: 20%);
  border-color: color.adjust(#007bff, $lightness: -10%);
  // 混色
  color: color.mix(#fff, #000, 25%);        // 75% 黑 + 25% 白
}

// _theme.scss —— 用 !default 声明可被外部覆盖的配置
$primary: #007bff !default;
$radius: 4px !default;
$font: system-ui !default;

.btn {
  background: $primary;
  border-radius: $radius;
  font-family: $font;
}

// main.scss —— 导入时定制，无需改模块源码
@use 'theme' with (
  $primary: #e91e63,
  $radius: 12px
);

@use 'sass:math';
@use 'sass:map';

$grid-columns: 12;
$gutter: 24px;
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
);

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 math.div(-$gutter, 2);
}
[class^='col-'] {
  padding: 0 math.div($gutter, 2);
  box-sizing: border-box;
}

// 基础列（移动优先，默认全宽）
@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex: 0 0 math.percentage(math.div($i, $grid-columns));
    max-width: math.percentage(math.div($i, $grid-columns));
  }
}

// 各断点响应式列：col-md-6 之类
@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    @for $i from 1 through $grid-columns {
      .col-#{$name}-#{$i} {
        flex: 0 0 math.percentage(math.div($i, $grid-columns));
        max-width: math.percentage(math.div($i, $grid-columns));
      }
    }
  }
}

@use 'sass:map';

$themes: (
  'light': (
    'bg': #ffffff,
    'text': #212529,
    'accent': #007bff,
  ),
  'dark': (
    'bg': #1a1a1a,
    'text': #f5f5f5,
    'accent': #4dabf7,
  ),
);

// 遍历主题，输出成 CSS 自定义属性
@each $theme-name, $tokens in $themes {
  $selector: if($theme-name == 'light', ':root', '[data-theme="#{$theme-name}"]');
  #{$selector} {
    @each $key, $value in $tokens {
      --color-#{$key}: #{$value};
    }
  }
}

// 业务用 CSS 变量，运行时可切主题
body {
  background: var(--color-bg);
  color: var(--color-text);
}
.link { color: var(--color-accent); }

@use 'sass:math';

// 去掉单位，方便运算
@function strip($n) { @return math.div($n, ($n * 0 + 1)); }

// 生成 clamp()：min~max 字号随视口 minVW~maxVW 线性变化
@function fluid($min, $max, $min-vw: 320px, $max-vw: 1280px) {
  $slope: math.div(strip($max) - strip($min), strip($max-vw) - strip($min-vw));
  $intercept: strip($min) - $slope * strip($min-vw);
  @return clamp(
    #{$min},
    #{$intercept * 1px} + #{$slope * 100vw},
    #{$max}
  );
}

h1 { font-size: fluid(28px, 56px); }
h2 { font-size: fluid(22px, 36px); }
p  { font-size: fluid(16px, 18px); }

// 占位符 %：只有被 @extend 才输出，会把选择器分组
%card-base {
  padding: 16px;
  border-radius: 8px;
}
.card-a { @extend %card-base; color: blue; }
.card-b { @extend %card-base; color: red; }

/* @extend 输出：选择器被合并到一处，声明不重复 */
.card-a, .card-b { padding: 16px; border-radius: 8px; }
.card-a { color: blue; }
.card-b { color: red; }

// mixin：每次调用都复制一份声明
@mixin card-base { padding: 16px; border-radius: 8px; }
.card-a { @include card-base; color: blue; }
.card-b { @include card-base; color: red; }

/* mixin 输出：声明被复制，未 gzip 前体积更大，但选择器独立、更可控 */
.card-a { padding: 16px; border-radius: 8px; color: blue; }
.card-b { padding: 16px; border-radius: 8px; color: red; }

@use 'sass:meta';

@mixin size($w) {
  @if meta.type-of($w) != 'number' {
    @error 'size() 需要 number，收到了 #{meta.type-of($w)}: #{$w}';
  }
  @if $w < 0 {
    @warn 'size() 收到负值 #{$w}，已按 0 处理';
    $w: 0;
  }
  @debug '最终宽度: #{$w}';   // 只在编译日志打印，不进产物
  width: $w;
}

// 1) detached ruleset：把一整块规则存进变量，延迟调用
@card-styles: {
  padding: 16px;
  border-radius: 8px;
};
.card { @card-styles(); }

// 2) 属性合并 merge：+ 逗号合并，+_ 空格合并
.shadow {
  box-shadow+: 0 2px 4px rgba(0,0,0,.1);
  box-shadow+: inset 0 0 2px #fff;   // 两条合并成一个 box-shadow
}

// 3) 映射：从命名空间/mixin 里按键取值
@sizes: {
  small: 8px;
  large: 24px;
};
.box { padding: @sizes[large]; }

// 4) 递归实现循环（Less 无 @for，用带 guard 的递归 mixin）
.gen-cols(@n, @i: 1) when (@i =< @n) {
  .col-@{i} { width: (@i * 100% / @n); }
  .gen-cols(@n, (@i + 1));
}
.gen-cols(12);

// 5) JS 表达式（需插件/旧版本，新版默认禁用，谨慎使用）
// @now: `Date.now()`;

primary = #007bff
radius = 4px

button()
  padding 10px 20px
  border-radius radius
  background arguments

.btn
  button(primary)
  &:hover
    background darken(primary, 10%)

// 内建循环
for i in 1..3
  .m-{i}
    margin (i * 8px)

/* postcss-custom-media：媒体查询条件也能复用，弥补原生缺失 */
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);

.sidebar { display: none; }
@media (--md) { .sidebar { display: block; } }
@media (--lg) { .sidebar { width: 280px; } }

// 一个更完整的 postcss.config.js（含嵌套、自定义媒体、逻辑属性）
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-custom-media'),
    require('postcss-nested'),
    require('postcss-logical'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production'
      ? require('cssnano')({ preset: 'default' })
      : false,
  ].filter(Boolean),
};

// tailwind.config.js —— content 决定扫描范围，摇树掉没用到的类
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {
      colors: { brand: '#007bff' },   // 扩展设计令牌
      spacing: { 18: '4.5rem' },
    },
  },
  plugins: [],
};

/* Button.module.scss */
.button { padding: 10px 20px; background: #007bff; }
.button:hover { background: #0069d9; }

// 组件里按对象引用，构建后类名变成 Button_button__x3f9a，天然不冲突
import styles from './Button.module.scss';
function Button() {
  return <button className={styles.button}>点我</button>;
}

// webpack 中的 loader 链（从后往前执行）
{
  test: /\.scss$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } },
  ],
}

# 官方迁移工具：自动把 @import 改成 @use 并加命名空间
npx sass-migrator module --migrate-deps src/main.scss

@use 'sass:math';

// @while：生成斐波那契式间距（较少用，但能表达任意迭代逻辑）
$i: 1;
$val: 4px;
@while $i <= 5 {
  .fib-#{$i} { padding: $val; }
  $val: $val * 1.5;
  $i: $i + 1;
}

// @each 解构：一次取多个值，批量生成定位工具类
$positions: (
  ('top', top, 0),
  ('bottom', bottom, 0),
  ('left', left, 0),
  ('right', right, 0),
);
@each $name, $prop, $value in $positions {
  .stick-#{$name} { position: absolute; #{$prop}: $value; }
}

@use 'sass:map';

$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
);

@function bp($name) {
  @if not map.has-key($breakpoints, $name) {
    @error 'Unknown breakpoint: #{$name}';
  }
  @return map.get($breakpoints, $name);
}

// 大于等于某断点（移动优先）
@mixin up($name) {
  @media (min-width: bp($name)) { @content; }
}
// 小于某断点（减 0.02px 避免边界重叠）
@mixin down($name) {
  @media (max-width: bp($name) - 0.02px) { @content; }
}
// 区间
@mixin between($lower, $upper) {
  @media (min-width: bp($lower)) and (max-width: bp($upper) - 0.02px) { @content; }
}

.nav {
  display: none;
  @include up('lg') { display: flex; }
}
.only-tablet {
  display: none;
  @include between('md', 'lg') { display: block; }
}

@use 'sass:color';
$base: #3b82f6;

.swatches {
  --darken:   #{color.adjust($base, $lightness: -15%)}; // 绝对减亮度
  --lighten:  #{color.adjust($base, $lightness: 15%)};  // 绝对加亮度
  --scale-d:  #{color.scale($base, $lightness: -30%)};  // 按剩余空间比例变暗（更自然）
  --desat:    #{color.adjust($base, $saturation: -40%)};// 降饱和
  --mix:      #{color.mix(#fff, $base, 20%)};           // 混入 20% 白
  --alpha:    #{color.change($base, $alpha: 0.5)};      // 直接改透明度
  --comp:     #{color.complement($base)};               // 补色（色相 +180）
}

@use 'sass:color';

$card-radius: 12px !default;
$card-pad: 20px !default;
$card-accent: #3b82f6 !default;

@mixin elevation($level: 1) {
  @if $level == 1 { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  @else if $level == 2 { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  @else { box-shadow: 0 12px 32px rgba(0,0,0,.18); }
}

.card {
  border-radius: $card-radius;
  padding: $card-pad;
  background: #fff;
  border-top: 3px solid $card-accent;
  @include elevation(1);
  transition: box-shadow .2s;

  &:hover { @include elevation(2); }

  &__title {
    margin: 0 0 8px;
    font-size: 1.125rem;
    color: #111;
  }
  &__body {
    color: #555;
    line-height: 1.6;
  }
  &__footer {
    margin-top: $card-pad;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  // 变体
  &--danger { border-top-color: #ef4444; }
  &--flat   { box-shadow: none; border: 1px solid #eee; }
  &--accent {
    background: color.mix(#fff, $card-accent, 92%);
  }
}

// postcss-annotate-px.js —— 教学用极简插件
module.exports = () => ({
  postcssPlugin: 'postcss-annotate-px',
  Declaration(decl) {
    if (decl.value.includes('px') && !decl.raws.value) {
      // 在声明后追加一条注释（真实插件会做值转换）
      decl.after({ text: ' from: ' + decl.value });
    }
  },
});
module.exports.postcss = true;

@use 'sass:map';

$tokens: (
  'space-1': 4px, 'space-2': 8px, 'space-3': 12px, 'space-4': 16px,
  'radius': 8px, 'accent': #3b82f6,
);

// 编译期把 Sass map 批量输出为运行时 CSS 变量
:root {
  @each $k, $v in $tokens {
    --#{$k}: #{$v};
  }
}

// 组件同时享受两者：Sass 做条件/循环，CSS 变量做运行时可变
@mixin pad($token) {
  padding: var(--#{$token});   // 引用运行时变量
}
.box { @include pad('space-4'); border-radius: var(--radius); }