如何使用SCSS生成引导网格列覆盖？

Question

我正在使用 bootstrap 的 12 列网格布局，我想制作一个覆盖网格列和排水沟的“开发助手”，这样我们就可以可视化网格，以帮助我团队中的非开发人员了解网格的工作原理在实际应用中。

我正在使用 SCSS 生成带有交替条纹的

linear-gradient

，它基本上可以工作，但计算中的某些内容略有偏差。

这是我的 SCSS 代码的相关部分

@function grid-stripes($column-color, $gutter-color: transparent) {
  $stripes: null;
  $col-width: percentage(divide(1, $grid-columns));

  @for $i from 1 through $grid-columns {
    //Columns
    $col-pos: calc((#{$col-width} * #{$i}) - #{$grid-gutter-width});
    $stripes:
      $stripes,
      $column-color $col-pos,
      $column-color $col-pos;

    //Gutters
    @if $i != $grid-columns {
      //Don't add a final gutter
      $gutter-pos: calc((#{$col-width} * #{$i}) - #{$grid-gutter-width});
      $stripes:
        $stripes,
        $gutter-color $gutter-pos,
        $gutter-color $gutter-pos;
    }
  }

  @return linear-gradient(to right, $stripes);
}

.row {
  position: relative;

  &::before {
    display: block;
    content: '';
    position: absolute;
    left: $grid-gutter-width / 2;
    right: $grid-gutter-width / 2;
    height: 100%;
    z-index: 1;
    opacity: 0.25;
    pointer-events: none; //allow clicks to pass through
    background: grid-stripes(red);
    background-size: cover;
  }
}

如果我有使用网格的布局，我希望叠加层在每个网格列的顶部显示一个红色列。在占据 6 列的内容上，我应该看到 6 红色列

相反，我的覆盖层在将列与列之间的排水沟间隔开方面不太正确，并且它似乎在透明和红色之间褪色，我只是想要一条硬线来划分这些

---

这里是它的工作演示，您可以看到 SCSS 生成的输出：https://codepen.io/FiniteLooper/pen/ZEgYrbP?editors=0100

Answer 1

要求

我需要始终显示 12 列，无论其包含什么内容，这样您始终可以根据可用的布局选项来查看网格

解决方案

伪元素::before

要使您的列可见，拥有伪元素是一个好主意，这样您就可以将其堆叠在网格顶部。

单列

使用

background-image: linear-gradient()

和硬停止，您可以突出显示装订线（用填充制成）和列的内容。

          background: linear-gradient(to right, 
            black 0%, 
            black 0.5px, 
            rgba(255, 0, 0, 0.2) 0.5px, 
            rgba(255, 0, 0, 0.2) 0.75rem, 
            rgba(255, 255, 0, 0.2) 0.75rem, 
            rgba(255, 255, 0, 0.2) calc(100% - 0.75rem), 
            rgba(255, 0, 0, 0.2) calc(100% - 0.75rem), 
            rgba(255, 0, 0, 0.2) calc(100% - 0.5px), 
            black calc(100% - 0.5px)
          );

• black 0%, black 0.5px

  将创建一条黑线，从开头开始，宽度为 0.5 像素。

• rgba(255, 0, 0, 0.2) 0.5px, rgba(255, 0, 0, 0.2) 0.75rem,

  将以红色突出显示左侧装订线。从黑线之后开始，宽度为 0.75rem。它是装订线的一半，因为装订线是列的右填充和下一列的左填充的组合。准确来说应该是

  calc(0.75rem - 0.5px)

  。

• rgba(255, 255, 0, 0.2) 0.75rem, rgba(255, 255, 0, 0.2) calc(100% - 0.75rem)

  然后突出显示内容，它会在一半的装订线后开始，并将在下一个装订线停止

  calc(100% - 0.75rem)

  。
• 然后是下一个排水沟。
• 然后是黑线。

现在您拥有 1 列的

background-image

。

所有栏目

您需要知道的就是重复这个渐变：

background-size: calc(100% / 12);

由于您有 12 列，因此您需要说渐变是总宽度的 1/12。然后就会重复。

代码

.visible-grid {
  .row {
    position: relative;

    &::before {
      display: block;
      content: '';
      position: absolute;
      height: 100%;
      z-index: 1;
      opacity: 0.25;
      pointer-events: none;
      left: 0;
      right: 0;
      background: linear-gradient(to right, 
        black 0%, 
        black 0.5px, 
        rgba(255, 0, 0, 0.2) 1px, 
        rgba(255, 0, 0, 0.2) 0.75rem, 
        rgba(255, 255, 0, 0.2) 0.75rem, 
        rgba(255, 255, 0, 0.2) calc(100% - 0.75rem), 
        rgba(255, 0, 0, 0.2) calc(100% - 0.75rem), 
        rgba(255, 0, 0, 0.2) calc(100% - 0.5px), 
        black calc(100% - 0.5px)
      );
      background-size: calc(100% / 12);
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<main class="container mt-2 visible-grid">
  <button type="button" class="btn btn-primary" onclick="document.querySelector('main').classList.toggle('visible-grid')">Toggle Grid</button>
  <h3>Plain Columns</h3>
  <div class="row mt-2">
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 1</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 2</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 3</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 4</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 5</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 6</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 7</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 8</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 9</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 10</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 11</div>
    </div>
    <div class="col-1">
      <div style="height: 200px" class="bg-secondary text-white">col 12</div>
    </div>
  </div>

  <hr>

  <h2>Example Content</h2>
  <div class="row mt-2">
    <div class="col-6">
      <div class="card shadow">
        <div class="card-body">
          <h5 class="card-title">6 Columns</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card shadow">
        <div class="card-body">
          <h5 class="card-title">3 Columns</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card shadow">
        <div class="card-body">
          <h5 class="card-title">3 Columns</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>

  </div>
</main>