scss 在项目中的 模块化、scss的使用

一、在对应目录下创建文件夹

reset.scss 一般命名为 normalize.scss

二、对应文件的内容

三、在main.js 中 引入 index.scss

import "@/assets/scss/index.scss";

四、全局引入（如variable.scss文件）

在vue.config.js中引入：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/assets/scss/variable.scss";
                @import "@/assets/scss/mixin.scss";
                `, //引入全局变量
            },
        },
    },
};

五、scss的使用

5.1 变量（variables） $

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//编译结果：
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

5.2 嵌套（nested rules）

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}  

//编译结果
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

5.3 Modules

注意：Dart Sass 支持@use ； 其他用@import引入

<style lang="scss">
@import "@/assets/scss/mixin.scss";
  .sbox {
    height: 20px;
    width: 50px;
    border: 1px solid black;
    @include ellipsis;
  }
</style>

5.4 Mixins 混合

@mixin ellipsis() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ceshi {
  @include ellipsis;
}



@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}

5.5 Extend/Inheritance

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-shared;
}

5.6 操作符

Sass 支持部分标准的 数学运算符: 例如 +、-、*、math.div() 和 %

article {
  width: math.div(600px, 960px) * 100%;
}