隐藏滚动条与mixin

隐藏滚动条

.div::-webkit-scrollbar{
    display: none;
}
.div{
    scrollbar-width: none;
}

• 前者适配chrome和safari，后者适配firefox。

@mixin封装

@mixin hiddenScrollBar () {
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
}

• 可以在项目中的style文件夹中创建一个mixin.scss文件，用于存储基础的样式方法，如上面的@mixin模块，可以提高代码的复用性。

@include使用

.div {
  @include hiddenScrollBar();
}

• 在需要使用的地方引入即可。

mixin定义

@mixin style1 {
  // 样式
}

• 使用@mixin定义的样式模块，可在其它样式文件中使用@include进行引用。
• @include根据模块名称进行引用，但因为Sass早期的遗留问题，字符”-“与字符”_“会被认为是同一个字符。
• 解析时，解析器会将@include引用的内容转换为CSS代码，插入在引用的位置中。

@mixin模块中也可以使用@include引用样式模块。

@mixin style2 {
  @include style1;
}

@mixin可带参

@mixin style3($width) {
  width: $width;
}

可以为参数设置默认值。

@mixin style3($width: 100px) {
  width: $width;
}

可以传多个参数，在处理一些多变参数的属性时，可以更为灵活。

@mixin style4($margin...) {
  margin: $margin;
}

.box {
  @include style4(0px);
  @include style4(0px, 1px);
}

模拟@mixin

• 从另一种角度去看，mixin是一种不改变原有类的前提下，为类添加新功能的方法。
• 各个类使用相同的属性和方法时，将相同点提取出来，按需引入类中。
• 在JS中，可以将共用的方法注入需要的对象原型，从而降低重复度。
• 但，这可能会导致原型污染、方法来源难以确定的问题。

function Boy() {
}

function Action() {
}

Action.prototype.say = function () {
    console.log("saying")
}
Action.prototype.cry = function () {
    console.log("crying")
}

function mixin(object, actions) {
    for (let action in actions.prototype) {
        object.prototype[action] = actions.prototype[action]
    }
}

mixin(Boy, Action)
new Boy().say()
new Boy().cry()

• Boy为接收注入方法的类，Action为共用的方法集合。
• 将共用的方法放到接受类的原型对象中，则接受类对象可使用共用的方法。

function mixin(object, actions, ...args) {
    if (args.length) {
        for (let i = 0; i < args.length; i++) {
            object.prototype[action] = actions.prototype[args[i]]
        }
    } else {
        for (let action in actions.prototype) {
            object.prototype[action] = actions.prototype[action]
        }
    }
}

• 如果是按需注入，可按如下进行更改。