SASS 语法👀

在上一篇文章中，我们学习了如何将 SCSS 编译为 CSS。现在我们将学习如何编写 SCSS。

您首先应该知道可以使用两种语法编写 SASS 样式表。

SCSS 语法
SASS语法

它们有区别吗？是的，下表列出了它们的变体。

为了使事情更清楚，请查看这个示例，它编写了两次 - 一次使用 SCSS 语法，一次使用 sass 语法。

在编写 SASS 或 SCSS 时，应遵守以下两个规则：
1-样式规则。2
-at 样式规则。

再次，您可以在下面的屏幕截图中概览这些规则。

不要害怕，我们将在以下章节中更详细地解释每个规则，但现在，让我们重点关注嵌套、变量、插值、占位符选择器和选择器组合器的五种样式原则。

1.变量

简单的 Sass 变量允许您通过为以字母 $ 开头的名称分配值来使用名称而不是实际值。

$variableName : value;

变量名称：任何不以数字或特殊字符（如 @）开头的名称。
值：任何值（列表、字符串、数字、布尔值、空值、颜色）

例子：

// We assign a variable
$colorOfHeading: #616165;

// then use it
h3 {
color: $colorOfHeading
}

请记住以下变量：

只能用作属性值，如果用作属性名称将会引发错误。
在其范围之外不可用。

例子：

$propertyName: 'font-size';
$propertyValue: 30px;

h3{
    $propertyName: $propertyValue; // not Valid
     font-size: $propertyValue; // Valid
}

例子：

$myColor: red; // in global scope
h1{
$myColor: green; // in local scope
color: $myColor; // green
}
p{
color: $myColor; // red
}

该!global标志可用于使局部变量变为全局变量。

例子：

$myColor: red;
h1{
$myColor: green !global;
color: $myColor; // green
}
p{
color: $myColor; // green
}

注意：连字符和下划线在 Sass 中是等效的。$font-size 与 $font_size 相同

例子：

$font-size: 20px;
h2{
font-size: $font_size; // 20px
}

提示：要完全控制样式的大小和宽度，请结合使用变量和表达式。

例子：

$full-width: 100%
.col-1 {float: left; width: $full-width / 1}
.col-2 {float: left; width: $full-width / 2}
.col-3 {float: left; width: $full-width / 3}

例子：

$baseFont: 10px;
$paragraphFontSize: 7px;
h3{font-size: $baseFont + $paragraphFontSize}

由于变量不能用作属性名，因此需要使用插值。在后续文章中，我们将更详细地介绍插值。

文章来源：https://dev.to/ak_ram/sass-syntax-34f1