Prepare the handwritten code

handwritten promise：

function myPromise(executer) {
  let resolve, reject;
  this.thenCallbacks = [];
  this.catchCallback = null;

  this.then = (callback) => {
    this.thenCallbacks.push(callback);
    return this;
  };
  this.catch = (callback) => {
    this.catchCallback = callback;
    return this;
  };

  resolve = (value) => {
    setTimeout(() => {
      this.thenCallbacks.forEach((callback) => {
        value = callback(value);
      });
    }, 0);
  };
  reject = (reason) => {
    setTimeout(() => {
      if (this.catchCallback) {
        this.catchCallback(reason);
      }
    }, 0);
  };
  try {
    executer(resolve, reject);
  } catch (error) {
    reject(error);
  }
}
new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, promise!");
  }, 1000);
})
  .then((value) => {
    console.log(value);
    return value + " Then 1";
  })
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

scss：
 

在 SCSS 中，有许多特殊的符号和操作符，它们都有各自的作用。以下是一些常见的符号：

**&**：代表当前选择器的父级。例如，.parent { &.child { color: red; } } 会编译为 .parent.child { color: red; }。

**$**：用于定义变量。例如，$color: red; 定义了一个名为 $color 的变量。

**@**：用于引用指令，如 @import, @mixin, @include, @function, @if, @for, @each, @while 等。

**%**：用于定义一个可复用的样式块，也称为占位符选择器。例如，%message { color: blue; } 定义了一个名为 %message 的样式块，你可以通过 @extend %message; 来引用它。

**#{$}**：用于变量插值。例如，$name: 'test'; .#{$name} { color: blue; } 会编译为 .test { color: blue; }。

**:**：用于定义伪类选择器，如 :hover, :active, :focus 等。

**::**：用于定义伪元素选择器，如 ::before, ::after, ::first-letter 等。

**>**：用于定义子元素选择器。例如，.parent > .child { color: red; } 选择 .parent 的直接子元素 .child。

**+**：用于定义相邻兄弟选择器。例如，.element + .sibling { color: red; } 选择 .element 的下一个兄弟元素 .sibling。

**~**：用于定义一般兄弟选择器。例如，.element ~ .sibling { color: red; } 选择 .element 的所有后续兄弟元素 .sibling。

*****：用于定义通配符选择器，选择所有元素。例如，* { margin: 0; padding: 0; } 会将所有元素的 margin 和 padding 设置为 0。

**[attr=value]**：用于定义属性选择器。例如，input[type="text"] { color: red; } 选择所有 type 属性为 "text" 的 input 元素。

​​​

在 Vue 2 中，你可以使用 >>> 或 /deep/ 或 ::v-deep 来实现深度选择，穿透组件的样式作用域。例如：
 

.parent >>> .child {

  color: red;

}

.parent /deep/ .child {

  color: red;

}

.parent ::v-deep .child {

  color: red;

}

在 Vue 3 中，>>> 和 /deep/ 已被弃用，推荐使用 ::v-deep。但是，::v-deep 的使用方式有所改变，它现在需要与选择器一起使用，形成一个函数调用的形式。例如：

.parent ::v-deep(.child) {

  color: red;

}

// _buttons.scss
$button-color: blue !default;

.button {
  color: $button-color;
}

// styles.scss
@forward 'buttons' with (
  $button-color: red
);

// other.scss
@use 'styles' as *;

.button {
  background-color: $button-color;
}

**:hover**：选择鼠标悬停在上面的元素。

**:active**：选择被用户激活（例如，通过点击或键盘操作）的元素。

**:focus**：选择获得焦点的元素。

**:visited**：选择用户已经访问过的链接。

**:link**：选择所有未被访问的链接。

**:first-child**：选择其父元素的第一个子元素。

**:last-child**：选择其父元素的最后一个子元素。

**:nth-child(n)**：选择其父元素的第 n 个子元素。

**:nth-last-child(n)**：选择其父元素的倒数第 n 个子元素。

**:first-of-type**：选择其父元素的第一个相同类型的子元素。

**:last-of-type**：选择其父元素的最后一个相同类型的子元素。

**:nth-of-type(n)**：选择其父元素的第 n 个相同类型的子元素。

**:nth-last-of-type(n)**：选择其父元素的倒数第 n 个相同类型的子元素。

**:not(selector)**：选择不匹配给定选择器的所有元素。

:enabled 和 **:disabled**：选择启用或禁用的表单元素。

**:checked**：选择被选中的表单元素（复选框、单选按钮等）。

**:root**：选择文档的根元素。

**:target**：选择当前活动的锚点（URL 中的哈希部分）。

**:empty**：选择没有子元素（包括文本节点）的元素。

**:lang(language)**：选择指定语言的元素。