uniapp中使用sass

一. 如有错误，欢迎指正。

二. 本文记录sass中mixin方法的使用，类似js函数，可以传参，减少css代码量

1. 新建scss文件

/* flex布局 */
@mixin flex-direction-align($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

2. 在uni.scss中引入上面的scss文件

@import "/static/style/libs/style.components.scss";

3. 在组件中使用scss
   使用方式 @include flex-direction-align

<style lang="scss" scoped>
    .setting{
        @include flex-direction-align($direction: column, $justify: flex-start)
    }
</style>

三. 具体使用请参考
官网地址： Sass Documentation | Sass Tutorial

image.png