SASS 完全教程

第一章：SASS 基础

1.1 安装和配置

SASS 的安装和基本配置。

练习 1.1：安装和配置示例

展示 SASS 的安装和配置过程。

安装和配置示例

# 使用 npm 安装
npm install -g sass

# 使用 yarn 安装
yarn global add sass

# 编译单个文件
sass input.scss output.css

# 监听文件变化
sass --watch input.scss:output.css

# 压缩输出
sass --style compressed input.scss output.css

1.2 变量

SASS 的变量使用。

练习 1.2：变量示例

展示变量的使用。

变量示例

// 定义变量
$primary-color: #333;
$secondary-color: #666;
$font-stack: Helvetica, sans-serif;

// 使用变量
body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 嵌套使用
.container {
  background-color: $secondary-color;
  
  .header {
    color: $primary-color;
  }
}

第二章：嵌套和混合

2.1 嵌套规则

SASS 的嵌套规则。

练习 2.1：嵌套规则示例

展示嵌套规则的使用。

嵌套规则示例

// 嵌套规则
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// 父选择器 &
.button {
  &-primary {
    background-color: blue;
  }
  
  &-secondary {
    background-color: gray;
  }
  
  &:hover {
    opacity: 0.8;
  }
}

2.2 混合器

SASS 的混合器使用。

练习 2.2：混合器示例

展示混合器的使用。

混合器示例

// 定义混合器
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 使用混合器
.box {
  @include border-radius(10px);
}

// 带默认值的混合器
@mixin box-shadow($x: 0, $y: 0, $blur: 0, $color: #000) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(2px, 2px, 5px, rgba(0,0,0,0.3));
}

第三章：继承和函数

3.1 继承

SASS 的继承功能。

练习 3.1：继承示例

展示继承的使用。

继承示例

// 基础样式
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 继承基础样式
.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

3.2 函数

SASS 的函数使用。

练习 3.2：函数示例

展示函数的使用。

函数示例

// 自定义函数
@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}

// 使用函数
body {
  font-size: calculate-rem(16px);
}

// 内置函数
$colors: (
  primary: #333,
  secondary: #666,
  accent: #ff0000
);

.element {
  color: map-get($colors, primary);
  background-color: lighten(map-get($colors, secondary), 20%);
}

第四章：控制指令

4.1 条件语句

SASS 的条件语句。

练习 4.1：条件语句示例

展示条件语句的使用。

条件语句示例

// @if 指令
$theme: dark;

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

// @for 循环
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

// @each 循环
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

4.2 循环

SASS 的循环功能。

练习 4.2：循环示例

展示循环的使用。

循环示例

// @while 循环
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

// 嵌套循环
$grid-columns: 12;
$grid-gutter: 20px;

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    width: percentage($i / $grid-columns);
    padding: $grid-gutter;
  }
}

第五章：最佳实践

5.1 项目结构

SASS 项目的最佳结构。

练习 5.1：项目结构示例

展示项目结构的最佳实践。

项目结构示例

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _placeholders.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _forms.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   └── _about.scss
└── main.scss

5.2 性能优化

SASS 的性能优化技巧。

练习 5.2：性能优化示例

展示性能优化的最佳实践。

性能优化示例

// 使用变量存储重复值
$primary-color: #333;
$secondary-color: #666;

// 使用混合器减少代码重复
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用继承减少代码量
%button-base {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

// 使用函数处理复杂计算
@function calculate-width($columns, $gutter) {
  @return (100% - ($gutter * ($columns - 1))) / $columns;
}

// 使用条件语句优化代码
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) { @content; }
  }
}