Sass(2)：Sass 基础语法

在上一篇文章中，我们了解了 Sass 的基本概念和用途。在本文中，我们将深入了解 Sass 的基础语法。

变量

Sass 中的变量使用 $ 符号声明，例如：

$primary-color: #333;

body {
  color: $primary-color;
}

在上面的示例中，我们定义了一个名为 $primary-color 的变量，并将其设置为 #333。然后，在 body 元素中，我们使用该变量设置了文本颜色。

当我们需要在多个位置使用相同的值时，使用变量可以使代码更加简洁和易于维护。

嵌套

Sass 允许我们在 CSS 规则中嵌套其他规则。例如：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin: 0 10px;
    }
  }
}

在上面的示例中，我们嵌套了 ul 和 li 元素的样式规则，这使得代码更加易读和组织。

嵌套属性

Sass 还允许我们在属性中嵌套其他属性。例如：

.box {
  font: {
    weight: bold;
    size: 16px;
    family: Arial, sans-serif;
  }
}

在上面的示例中，我们嵌套了 font 属性的子属性，这使得代码更加清晰和易于修改。

继承

Sass 中的继承允许我们从一个选择器中继承样式并将其应用于另一个选择器。例如：

.error {
  color: red;
}

.warning {
  @extend .error;
  font-weight: bold;
}

在上面的示例中，我们使用 @extend 关键字将 .warning 类选择器扩展到 .error 类选择器上，并将其应用于 color 属性。这使得我们可以避免重复的代码。

运算

Sass 中的运算符允许我们在样式表中执行数学运算。例如：

.container {
  width: 100% - 20px;
}

在上面的示例中，我们使用减号运算符从 100% 中减去 20px，并将其应用于 .container 元素的宽度。

控制指令

Sass 还支持条件语句和循环语句，这使得我们可以更加精确地控制样式表的输出。例如：

// javascriptcn.com 代码示例
$theme: dark;

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

在上面的示例中，我们使用 @if 和 @else 控制指令根据 $theme 变量的值设置页面的背景色和文本颜色。

总结

在本文中，我们深入了解了 Sass 的基础语法，包括变量、嵌套、继承、运算和控制指令。使用这些功能，我们可以更加高效地编写和维护 CSS 样式表。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657ec633d2f5e1655d9a2bc8