SASS语法基础

SASS基础语法

1. 变量和嵌套

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

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

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

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

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

2. 部分文件和导入

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

// styles.scss

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

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

3. 混合宏和扩展

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

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

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

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

// 定义基础按钮样式
.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)：混合两个颜色。

  • 示例：

    $primary-color: #0074D9;
    
    .button {
      background-color: lighten($primary-color, 20%);
      color: darken($primary-color, 10%);
    }
    

• 字符串函数：

  • str-length($string)：返回字符串的长度。

  • str-insert($string, $insert, $index)：在指定位置插入字符串。

  • 示例：

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

2. 自定义函数

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

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

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

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

3. 数学和颜色操作

• 数学操作：

  • SASS支持基本的数学运算，包括加法、减法、乘法和除法。例如：

    $base-font-size: 16px;
    
    .large-text {
      font-size: $base-font-size * 1.5;
    }
    

• 颜色操作：

  • SASS允许您对颜色进行操作，例如调整透明度、转换为灰度等。例如：

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