Sass 中实现带箭头提示的技巧

Sass 中实现带箭头提示的技巧

在前端开发中，我们经常会需要在界面中添加一些提示，例如指向某个元素的箭头。本文将介绍如何使用 Sass 实现带箭头提示。

具体实现方式：

1. 首先我们需要定义提示框的样式，可以使用 Sass 的嵌套语法，如下所示：

// www.javascriptcn.com code example
.tooltip {
  position: relative;
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  padding: 10px;
  line-height: 1.5;
  text-align: center;
  width: 200px;
}

1. 接着我们需要定义箭头的样式，可以使用 Sass 的 mixin，如下所示：

// www.javascriptcn.com code example
@mixin create-arrow($border-color, $direction, $size) {
  $arrow-width: $size;
  $arrow-height: $size;
  $space: ($arrow-width/2)/tan(45deg);

  &::before {
    content: "";
    position: absolute;
    border: solid $size;
    border-color: $border-color;
    background-color: #333;
  }

  @if $direction == up {
    top: -$arrow-height;
    left: 50%;
    margin-left: (-1*$space);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  @if $direction == down {
    bottom: -$arrow-height;
    left: 50%;
    margin-left: (-1*$space);
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  @if $direction == left {
    left: -$arrow-width;
    top: 50%;
    margin-top: (-1*$space);
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }

  @if $direction == right {
    right: -$arrow-width;
    top: 50%;
    margin-top: (-1*$space);
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
  }
}

在这个 mixin 中，我们定义了三个参数，分别是边框颜色、箭头方向和箭头大小。通过计算出箭头的宽度、高度和间距，再根据方向添加对应的边框颜色和位置样式，最终实现一个可重用的箭头 mixin。

1. 使用上面的 mixin，我们就可以为提示框添加箭头了，如下所示：

// www.javascriptcn.com code example
.tooltip {
  position: relative;
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  padding: 10px;
  line-height: 1.5;
  text-align: center;
  width: 200px;

  &.tooltip-up {
    @include create-arrow(#333, up, 10px);
  }

  &.tooltip-down {
    @include create-arrow(#333, down, 10px);
  }

  &.tooltip-right {
    @include create-arrow(#333, right, 10px);
  }

  &.tooltip-left {
    @include create-arrow(#333, left, 10px);
  }
}

我们为提示框定义了四个不同的类，分别对应四个不同方向的箭头，通过添加不同的类名，我们就可以为不同的提示框添加不同的箭头了。

1. 最后，我们来看一下如何在 HTML 中使用这个样式，如下所示：

// www.javascriptcn.com code example
<div class="tooltip tooltip-up">
  这是一个向上的提示框
</div>

<div class="tooltip tooltip-down">
  这是一个向下的提示框
</div>

<div class="tooltip tooltip-right">
  这是一个向右的提示框
</div>

<div class="tooltip tooltip-left">
  这是一个向左的提示框
</div>

通过添加上面定义的类名，我们就可以在 HTML 中实现不同方向的提示框了。

结语：

本文介绍了如何使用 Sass 实现带箭头的提示框，通过这个例子，我们可以看到 Sass 在样式重用和维护方面的优势。同时，本文也提供了一个实用的箭头 mixin，对于需要在项目中添加箭头提示的开发者们来说，也是一个不错的参考。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d6802fa941bf7134c48f8c