Question

在我的项目中，有一个区域应该在CSS网格中显示与此类似的项目：

我是这样标记我的

<section class="section-b py-2">
  <div class="container">
    <h2 class="section-heading">
      <span class="section-heading-line"></span>What can we do for you<span class="section-heading-line"></span>
    </h2>
    <div class="section-b-grid">
      <div class="section-b-grid-item-1">
        <h3 class="grid-item-number">01</h3>
        <strong class="grid-item-title">Complex Detailing</strong>
        <p class="grid-item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, impedit.</p>
      </div>

这是我的SCSS代码：

    .section {
  &-heading {
    color: $primary-color;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    position: relative;
    &-line {
      position: absolute;
      bottom: 50%;
      background: rgba($color: #ccc, $alpha: 0.6);
      height: 1px;
      width: 390px;

      &:nth-child(odd) {
        left: 0;
      }
      &:nth-child(even) {
        right: 0;
      }
    }
  }
  // SECTION A:  LANDING
  &-a {
    #landing-image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #landing-content {
      margin-top: 5rem;
      display: flex;
      justify-content: right;
      h1 {
        text-transform: uppercase;
        text-align: right;
        border-right: 1px solid #ccc;
        font-weight: lighter;
        letter-spacing: 7px;
        position: relative;
      }
      p {
        position: absolute;
        left: 12rem;
        transform: rotate(-90deg);
        color: $primary-color;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        font-size: 1.5rem;
        font-weight: bold;
        position: relative;
        img {
          position: absolute;
          top: 0.75rem;
          left: -0.5rem;
          height: 60px;
          width: 10px;
          transform: rotate(90deg);
          transform-origin: 0 0;
        }
      }
    }
  }
  // SECTION B:  WHAT CAN WE DO FOR YOU
  &-b {
    margin-top: 5rem;
    background: $secondary-color;
    &-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1rem;
      grid-template-areas: '
      item-1 item-1 item-4
      item-2 item-3 item-4
      item-2 item-3 item-5
      ';
      &-item {
        display: none;
      }
    }
  }
}

这个想法是，有多个.section-b-item类，我希望它们都共享一些共同的样式，然后再进行单独编辑（.section-b-item-1将嵌套在＆-item中，＆-1）。

我确保多次正确嵌套所有内容（＆-b为.section-b）。我的SASS编译器也正常运行。我抛出了一个显示：在我的＆-item选择器中没有一个可以测试我是否将它们正确地定位了，但是没有用。我也尝试直接在全局范围内定位我的网格项目类，但无济于事。

我不明白为什么会这样，因为我输入的标记似乎与SCSS相符。

Answer 1

您在标记中使用section-b-grid-item-1类，而SASS为.section-b-grid-item生成“显示：无”规则。在标记中更正您的课程，以正确定位。

使用SCSS定位我的课程时遇到问题

1 个答案: