sass 引入sass_了解Sass中的可变范围

sass 引入sass

在本文中，我们将更深入地研究Sass中的变量和变量范围 。 变量的范围描述了定义它的上下文，因此也可以使用它。

首先，我将介绍Sass支持的范围。 然后，我将解释两个可用于自定义变量值的有用标志。 最后，我将简要介绍可用的函数来检查变量是否存在。

Sass可变范围

Sass支持两种类型的变量： 局部变量和全局变量。

默认情况下，在任何选择器之外定义的所有变量均被视为全局变量。 这意味着可以从样式表中的任何位置访问它们。 例如，这是一个全局变量：

$bg-color: green;

另一方面，局部变量是在选择器内部声明的变量。 稍后，我们将研究如何自定义该行为。 现在，让我们来看第一个例子。

在这里，我们定义一个mixin ，然后定义其中的btn-bg-color变量。 这是一个局部变量，因此仅对该mixin中的代码可见：

@mixin button-style {
    $btn-bg-color: lightblue;
    color: $btn-bg-color;
}

接下来，我们可以如下调用mixin：

button {
    @include button-style;
}

生成CSS：

button {
    color: lightblue;
}

但是，想像一下，我们还想在另一个选择器中使用此变量（而不是mixin）：

.wrap {
    background: $btn-bg-color;
}

这将给我们以下错误：

Undefined variable: "$btn-bg-color".

那是意料之中的，对吧？ 我们尝试访问本地范围内的mixin变量。 但是，请不要担心，如上所述，我们将在下一部分中解决此问题。

嵌套选择器

值得一提的是，如果我们在选择器中声明变量，则任何其他嵌套选择器都可以访问它。 这是一个例子：

.wrap {
    $bg-color: red;
    
    &:after {
        background: lighten($bg-color, 10%);
    }
}

编译为：

.wrap:after {
    background: #ff3333;
}

但是，请看下面的示例，其中我们定义了一个函数，然后将该函数与嵌套选择器一起使用：

@function my-function() {
    $text-color: black;
    @return $text-color;
}
    
.wrap {
    color: my-function();
    
    &:after{
        background: $text-color;
    }
}

如果我们尝试对此进行编译，则会得到前面讨论的相同错误。 同样，发生这种情况是因为我们无法访问text-color变量。 它不是直接在父选择器中定义的，而是在我们选择器调用的函数中定义的。

变量名

全局变量和局部变量可以具有相同的名称。 为了演示这种行为，我们将研究第四个示例：

$text-color: tomato;

@mixin button-style {
    $text-color: lime;
    color: $text-color;
}
    
@mixin link-style {
    $text-color: black;
    color: $text-color;
}

在这里，我们定义了三个具有相同名称的不同变量（ text-color ）。 第一个是全局变量，而其他两个是局部变量。

以下是一些使用它们的样式：

button {
    @include button-style;
}
     
a {
    @include link-style;
}
     
.wrap {
    background: $text-color;
}

以及生成CSS：

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: tomato;
}

那是您所期望的吗？

请记住，除非使用当前版本的Sass（3.4）进行编译，否则我们将看不到这些样式。 例如，假设我们使用Sass 3.3，我们CSS输出将如下所示：

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: black;
}

请注意.wrap选择器的背景色不同。 发生这种情况是因为根据早期的Sass版本（与LibSass相同），如果我们在本地重新定义全局变量的值（例如text-color ），则它将是变量的新（全局）值。 因此，在我们的示例中，编译样式取决于我们声明变量和mixins的顺序。

default标志

如果尚未设置变量或变量的当前值为null （视为未分配），则可以使用此标志设置变量的值。 为了更好地说明我们如何在实际场景中利用它，让我们假设我们有一个具有以下结构的项目：

Project-Name/
    ├── ...
    ├── css/
    │   └── app.css
    └── scss/
        ├── _config.scss
        ├── _variables.scss
        ├── _mixins.scss
        └── app.scss

app.scss文件如下所示：

@import "config";
@import "variables";
@import "mixins";
    
button {
    @include button-style;
}

// more styles

让我们看看部分文件的内容。

首先， variables.scss文件包含我们的变量：

$btn-bg-color: lightblue !default;
$btn-bg-color-hover: darken($btn-bg-color, 5%);
    
// more variables

注意分配给btn-bg-color变量的default标志。

其次， mixins.scss文件包含我们的mixins：

@mixin button-style ($bg-color: $btn-bg-color, $bg-color-hover: $btn-bg-color-hover) {
    background-color: $bg-color;
    // more styles
    	
    &:hover {
        background-color: $bg-color-hover;
        // more styles	
    }
}
    
// more mixins

然后，生成的app.css文件将如下所示：

button {
    color: lightblue;
}
    
button:hover {
    background-color: #99cfe0;
}

因此，我们的按钮带有默认样式。 但是，让我们假设我们希望可以选择通过应用自定义值来覆盖它们。 为此，我们可以在config.scss部分文件中重新分配所需的（默认）变量：

$btn-bg-color: chocolate;
    
// more variables

将此变量的值设置为chocolate将导致忽略已收到default标志的相应值（ lightblue ）。 因此，生成CSS会发生变化，如下所示：

button {
    color: chocolate;
}
    
button:hover {
    background-color: #bc5e1b;
}

注意 ：如果未向btn-bg-color变量添加default标志，则由于CSS的级联性质，我们CSS如下：

button {
    color: lightblue;
}
    
// hover styles

global标志

第二个标志帮助我们更改局部变量的范围。

您还记得我们在第一个示例中看到的错误吗？ 好吧，那是因为我们试图在.wrap选择器中使用btn-bg-color变量。 让我们修改示例以包括此新标志。 以下是新样式：

@mixin button-style {
    $btn-bg-color: lightblue !global;
    color: $btn-bg-color;
}
    
button {
    @include button-style;
}
    
.wrap {
    background: $btn-bg-color;
}

如下所示，由于有了此标志，CSS编译没有任何错误：

button {
    color: lightblue;
}
    
.wrap {
    background: lightblue;
}

global标志很有用，但请记住，更改变量的范围并不总是好的做法。

检查变量是否存在

Sass提供了两个自检功能来测试变量是否存在。 我们可以使用variable-exists和/或global-variable-exists函数来检查我们的局部变量和/或全局变量是否分别存在。

例如，这是一个常见的用例，其中我们定义了一个变量，该变量包含Google Font的绝对路径。 然后，我们选择将字体导入样式表中，但前提是已实例化了相关变量。

$google-font: "http://fonts.googleapis.com/css?family=Alegreya";
    
@if(global-variable-exists(google-font)) {
    @import url($google-font);
}

结果：

@import url("http://fonts.googleapis.com/css?family=Alegreya");

结论

在本文中，我向您介绍了Sass中变量范围的概念。 为了使事情更清楚，我们查看了不同的示例，因此希望您现在对范围的工作原理有了很好的了解。 您可以在SassMeister要点中找到本文的所有示例，并随时在评论中提出任何问题！

翻译自: https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

sass 引入sass