CSS 预处理器

sass / less / stylus

相当于使用另外的一种语法来实现 css 样式的编写，比如

sass 编写的文件通常后缀名为 `*.scss`、

less 编写的文件通常后缀名为 `*.less`。

编写的 `*.scss` 或 `*.less` 文件，最后会经过编译生成 `*.css` 文件。

vite 构建工具中能够实现自动的 css 预处理文件的编译，但前提是得安装相关的依赖包资源: `sass` 或 `less`。

在单文件组件 `*.vue` 的文件中，`<style>` 标签也可添加 `lang` 属性指定 css 预处理器的语言，如: `<style lang="scss">`

如利用 sass 实现 css 编写，先安装 `sass` 包:

$ npm i sass -D

在组件的 `<style lang="scss">` 标签中添加预处理器语言:

<style lang="scss" scoped>

$font-base: 14px;

$font-normal: 16px;

$font-biger: 18px;



.app {

  display: flex;

  flex-direction: column;

  height: 100%;



  .content {

    flex: 1;



    &-title { // .content-title

      font-size: $font-base;



      &__icon {

        font-size: $font-base * 2;

      }

      &__text {

        font-size: $font-base;

      }

    }

    &-body {

      font-size: $font-normal

    }

    &-footer {

      font-size: $font-biger;

      font-weight: 700;

    }

  }

}

</style>