知识库

Appearance

Return to top
On this page

Sass 基础概念

Sass（Syntactically Awesome Style Sheets）是一个成熟、稳定且强大的CSS扩展语言。了解Sass的基础概念是掌握其高级功能的前提。

Sass与CSS的关系

Sass是CSS的扩展，它完全兼容CSS语法。所有有效的CSS代码都是有效的Sass代码，但Sass提供了更多高级功能。Sass文件需要编译成CSS才能在浏览器中使用。

两种语法格式

Sass提供两种语法格式：

SCSS (Sassy CSS)

  • 语法与CSS兼容
  • 使用花括号{}和分号;
  • 文件扩展名为.scss
  • 推荐用于新项目
scss
$color: blue;

.example {
  color: $color;
  border: 1px solid darken($color, 10%);
}

缩进语法 (Indented Syntax)

  • 使用缩进来表示嵌套
  • 不使用花括号和分号
  • 文件扩展名为.sass
  • 是Sass的原始语法
sass
$color: blue

.example
  color: $color
  border: 1px solid darken($color, 10%)

核心概念详解

1. 变量 (Variables)

变量允许您存储值并在整个样式表中重复使用。

scss
// 定义变量
$primary-color: #3498db;
$font-size: 16px;
$border-radius: 4px;

// 使用变量
.button {
  background-color: $primary-color;
  font-size: $font-size;
  border-radius: $border-radius;
}

变量的作用域

  • 默认为全局作用域
  • 可以在选择器内定义局部变量
  • 局部变量优先级高于全局变量

2. 嵌套 (Nesting)

嵌套允许您以更直观的方式编写CSS，反映HTML结构。

scss
.navbar {
  background-color: #333;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
    
    &:hover {
      background-color: #555;
    }
  }
  
  a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: white;
  }
}

父选择器引用 (&)

使用&引用父选择器，常用于伪类和状态选择器。

scss
.button {
  background-color: blue;
  
  &:hover {
    background-color: darkblue;
  }
  
  &.active {
    background-color: green;
  }
  
  .icon & {
    margin-right: 10px;
  }
}

3. 混合宏 (Mixins)

混合宏允许您定义可重用的样式块，可以接受参数。

scss
// 定义混合宏
@mixin button-style($bg-color: blue, $text-color: white) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 使用混合宏
.primary-btn {
  @include button-style(#007bff, #fff);
}

.secondary-btn {
  @include button-style(#6c757d, #fff);
}

4. 继承 (Extend/Inheritance)

使用@extend使一个选择器继承另一个选择器的样式。

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

.success {
  @extend .message;
  border-color: #28a745;
  color: #155724;
  background-color: #d4edda;
}

.error {
  @extend .message;
  border-color: #dc3545;
  color: #721c24;
  background-color: #f8d7da;
}

5. 函数 (Functions)

Sass提供内置函数，也可以自定义函数。

scss
// 内置函数示例
$width: percentage(50px / 100px); // 50%

// 自定义函数
@function calculate-em($px, $context: 16px) {
  @return ($px / $context) * 1em;
}

.title {
  font-size: calculate-em(24px);
}

数据类型

Sass支持多种数据类型：

1. 数字 (Numbers)

  • 整数和浮点数
  • 可带单位（px, em, rem, %, etc.）

2. 字符串 (Strings)

  • 用引号或不用引号
  • 可以进行字符串操作

3. 颜色 (Colors)

  • 十六进制、RGB、HSL等格式
  • 内置颜色函数

4. 布尔值 (Booleans)

  • true 或 false

5. 空值 (Null)

  • 表示无值

6. 列表 (Lists)

  • 用空格或逗号分隔的值
  • 类似于数组

7. 映射 (Maps)

  • 键值对集合
  • 类似于对象
scss
// 列表示例
$font-stack: helvetica, arial, sans-serif;
$primary-colors: (red, blue, green);

// 映射示例
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745
);

.nav-link {
  color: map-get($theme-colors, "primary");
}

模块系统 (Sass 4.0+)

Sass引入了模块系统，使用@use替代@import：

scss
// _variables.scss
$primary-color: #3498db;
$font-size: 16px;

// main.scss
@use 'variables';

.element {
  color: variables.$primary-color;
  font-size: variables.$font-size;
}

编译模式

Sass提供多种编译模式：

1. 嵌套 (Nested)

  • 默认模式
  • 输出嵌套格式的CSS

2. 展开 (Expanded)

  • 每个属性独占一行
  • 易于阅读

3. 紧凑 (Compact)

  • 每个CSS规则独占一行

4. 压缩 (Compressed)

  • 移除所有空格和注释
  • 最小化输出

这些基础概念是学习Sass的基石，掌握它们将有助于您更好地理解Sass的高级功能和最佳实践。