理解Sass中变量作用域

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

在这篇文章中我们将一起深入探讨Sass的变量和变量作用域。变量作用域的描述是根据上下来定义和在哪使用变量。

首先,我们将介绍Sass作用域范围。然后,将解释两个用在变量值中标签,这两个标签非常有用。最后将简单介绍可用的函数,用来检查是否存在一个变量。

Sass变量作用域

Sass支持两种类型变量:局部变量全局变量

默认情况之下,所有定义在任何选择器之外的变量被认为是全局变量。这意味着他们可以在样式表中任意地方被访问。例如,这里有一个全局变量:

$bg-color: green;

另一方面,定义在选择器内的变量称之为局部变量。后面我们将研究如何自定义他们的行为。但是现在,让我们看看我们的第一个示例。

在这里,我们定义了一个混合宏,然后在里面设置了一个$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".

这是可以预料的是吧?我们试图在一个混合宏中调用一个局部变量。别担心,正如上面提到的,接下来的内容,我们会解决这个问题。

嵌套选择器

值得一提的是,如果我们在一个选择器内声明了一个变量,嵌套在里面的其他选择器中都可以访问它。这里有一个例子:

.wrap {
    $bg-color: red;

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

编译出来的CSS:

.wrap:after {
    background: #ff3333;
}

然而,看看下面的例子,我们定义了一个函数,然后在嵌套的选择器中使用这个函数:

@function my-function() {
    $text-color: black;
    @return $text-color;
}

.wrap {
    color: my-function();

    &:after{
        background: $text-color;
    }
}

如果我们试图编译这个,我们会得到同样的错误。

Undefined variable: "$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;
}

我们定义了三个相同变量名的变量,只是他们具有不同的值。第一个是全局变量,其他两个是局部变量。

在样式这样调用他们:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/understanding-variable-scope-in-sass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部