SCSS

CSS预处理器

SASS

Syntactically Awesome StyleSheets

CSS 预处理器，是 CSS 的一种超集；预处理器很多，还有less、Stylus等

SASS扩展了CSS3，增加了规则嵌套、变量、混合、选择器继承等等

扩展名.sass

缩进代替花括号

SCSS

Sassy CSS - Sassy Cascaded Style Sheets

SCSS就是SASS的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能

扩展名.scss

更容易学习开发代码

通过采样添加新代码而不是重写现有代码库更容易与现有代码库集成

在实现代码方面更具逻辑性和复杂性

具有模块化功能，可以通过使用某种注释以更加模块化的方式组织代码

具有不同的变量

可以处理多个类和不同的嵌套样式

更多信息，请访问SASS

安装

仅仅开发依赖，打包发布后，已经编译为对应的CSS，不再需要这个依赖

-D等同于--save-d

npm i sass -D

特性

缩进和嵌套 - 通过缩进和嵌套来表示元素的关系；基本使用如下

<ul>
    <li>Lorem.</li>
    <li>Similique?</li>
    <li>Sit?</li>
    <li>Omnis.</li>
    <li>Distinctio?</li>
</ul>

<style lang="scss" scoped>
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 2;
        
        li {
            border-bottom: 1px solid #f40;
            cursor: pointer;
        
            &:hover {
            color: #f40;
            }
        
            &::before {
            content: '. ';
            }
        
            &::after {
            content: '-';
            }
        }
    } 
</style>

混合 mix - 代码重用；可以传递参数；可以增加内容