Scss

一种高效的 css 预处理语言

scss 中文官网：https://www.sass.hk/

变量

声明

scss变量的声明和css属性的声明很像：

$main-color: #fff;

scss 变量的命名是允许使用 - 和 _ 进行单词的连接，使用 - 还是 _ 由个人习惯决定

引用

#logo {
    color: $main-color;
}

作用域

scss 变量是允许在 css 块之外定义

定义在 css 块中的 scss 变量，只能在这个 css 块中使用

嵌套

父子选择器直接是可以嵌套编写，减少大量父选择器的编写，提高编写效率

.index-container {
    .index-content {
        background-color: #fff
    }
}

父选择器

在嵌套 CSS 规则时，直接使用 & 代替父选择器

a {
    color: #fff
    
    &:hover {
        color: red
    }
}