SASS语法基础 - 技术栈

SASS基础语法

1. 变量和嵌套

变量：在SASS中，您可以使用变量来存储重复使用的值，例如颜色、字体大小等。定义一个变量时，使用$符号，如下所示：

scss 复制代码

// 定义变量
$primary-color: #0074D9;

// 使用变量
body {
  background-color: $primary-color;
}

嵌套：SASS允许您在选择器内部嵌套其他选择器，以提高代码的可读性。例如：

scss 复制代码

// 嵌套规则
nav {
  ul {
    list-style: none;
    li {
      padding: 10px;
    }
  }
}

2. 部分文件和导入

部分文件 ：SASS允许您将样式分成多个部分文件，以便更好地组织和维护代码。每个部分文件通常以_开头，并且不会单独编译为CSS文件。例如，您可以创建一个名为_variables.scss的文件来存储变量。
导入：使用@import指令将部分文件导入到主SASS文件中。例如：

scss 复制代码

// styles.scss

// 导入变量文件
@import 'variables';

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

3. 混合宏和扩展

混合宏：混合宏类似于函数，它允许您定义一组样式规则，然后在其他选择器中重复使用。例如：

scss 复制代码

// 定义混合宏
@mixin button-style {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

// 使用混合宏
.button {
  @include button-style;
}

扩展：使用@extend指令可以继承其他选择器的样式。这对于共享样式非常有用。例如：

scss 复制代码

// 定义基础按钮样式
.button-base {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

// 扩展按钮样式
.primary-button {
  @extend .button-base;
}

.secondary-button {
  @extend .button-base;
  background-color: #E74C3C;
}

SASS函数与操作符

1. 内置函数

SASS提供了许多内置函数，用于处理颜色、字符串、数值等。以下是一些常用的内置函数：

颜色函数：
- lighten($color, $amount)：使颜色变亮。
- darken($color, $amount)：使颜色变暗。
- mix($color1, $color2, $weight)：混合两个颜色。
- 示例：
  scss 复制代码
```
$primary-color: #0074D9;

.button {
  background-color: lighten($primary-color, 20%);
  color: darken($primary-color, 10%);
}
```
字符串函数：
- str-length($string)：返回字符串的长度。
- str-insert($string, $insert, $index)：在指定位置插入字符串。
- 示例：
  scss 复制代码
```
$title: "Hello, World!";

.header {
  content: str-insert($title, " Awesome", 6);
}
```

2. 自定义函数

您还可以创建自定义函数来扩展SASS的功能。例如，假设您想编写一个函数来计算两个数的平均值：

scss 复制代码

// 自定义函数：计算平均值
@function average($num1, $num2) {
  @return ($num1 + $num2) / 2;
}

// 使用自定义函数
$score1: 85;
$score2: 92;

.average-score {
  font-size: average($score1, $score2) * 1px;
}

3. 数学和颜色操作

数学操作：
- SASS支持基本的数学运算，包括加法、减法、乘法和除法。例如：
  scss 复制代码
```
$base-font-size: 16px;

.large-text {
  font-size: $base-font-size * 1.5;
}
```
颜色操作：
- SASS允许您对颜色进行操作，例如调整透明度、转换为灰度等。例如：
  scss 复制代码
```
$primary-color: #0074D9;

.transparent-button {
  background-color: rgba($primary-color, 0.5);
}
```