应该在嵌套块内定义变量.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include <iostream>
 
int main()
{ // outer block
    int apples(5); // here's the outer block apples
 
    if (apples >= 5) // refers to outer block apples
    { // nested block
        // no inner block apples defined
 
        apples = 10; // this now applies to outer block apples, even though we're in an inner block
 
        std::cout << apples; // print value of outer block apples
    } // outer block apples retains its value even after we leave the nested block
 
    std::cout << apples; // prints value of outer block apples
 
    return 0;
} // outer block apples destroyed

在这两个例子中,外嵌苹果不会受到嵌套嵌段苹果的影响。这两个程序之间的唯一区别是苹果表达式苹果= 10适用于。
阴影是一般应该避免的东西,因为它是相当混乱!
规则:避免在外部块中使用与变量相同的嵌套变量。
变量应该在最有限的范围内定义

例如,如果变量只在嵌套块中使用,则应该在嵌套块内定义变量.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#include <iostream>
 
int main()
{
    // do not define y here
 
    {
        // y is only used inside this block, so define it here
        int y(5);
        cout << y;
    }
 
    // otherwise y could still be used here
 
    return 0;
}


SCSS(Sassy CSS)是一种 CSS 预处理器,它扩展了 CSS 的功能,提供了变量、嵌套规则、混合宏(Mixins)、继承(Inheritance)等特性,使得样式表的编写更加模化和可维护。在 SCSS 中,变量和嵌套规则是最基础且最常用的功能之一。 ### 变量定义 SCSS 允许开发者通过 `$` 符号定义变量,以便在多个样式规则中复用相同的值。例如,可以定义一个主色调变量并在多个选择器中使用它: ```scss $primary-color: #3498db; .button { background-color: $primary-color; } .link { color: $primary-color; } ``` 上述代码中,`$primary-color` 变量定义为 `#3498db`,然后在 `.button` 和 `.link` 的样式中被引用。如果需要更改主色调,只需修改变量值即可,而无需逐个更改每个使用该颜色的样式规则[^2]。 此外,变量可以使用 `!default` 标志进行默认值设定。如果变量已经赋值,则不会重新赋值;如果尚未赋值,则使用默认值: ```scss $font-size: 16px !default; ``` ### 嵌套定义 SCSS 支持 CSS 选择器的嵌套写法,这种写法更符合 HTML 的结构层次,也更容易理解和维护。例如,以下代码展示了如何在 SCSS 中嵌套 `ul`、`li` 和 `a` 的样式: ```scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; a { text-decoration: none; color: #000; } } } ``` 这段 SCSS 代码将被编译为标准的 CSS: ```css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav li a { text-decoration: none; color: #000; } ``` 嵌套规则不仅限于元素选择器,还可以使用 `&` 符号来引用父选择器,实现伪类、伪元素或 BEM 类似的命名方式: ```scss .button { background-color: #fff; border: 1px solid #ccc; &:hover { background-color: #f0f0f0; } &--primary { background-color: #3498db; color: #fff; } } ``` ### 总结 SCSS 通过变量和嵌套规则等特性,极大提升了 CSS 的可维护性和开发效率。变量使得样式值的管理更加集中和灵活,而嵌套规则则使样式表结构更清晰、更贴近 HTML 的层级关系。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值