这个SASS语法的等效CSS是什么？

Question

我一直在做一个关于 html / css 的教程，并且遇到了一些问题，有些东西无法按我放置的任何顺序工作。但是当我从文件中复制代码时，即使 ATOM 编辑器不支持 SASS，它也会运行。替代此语法的等效 CSS 是什么？我试图将图像从网格的一侧翻转到另一侧，但是图像高于文本时一切都会乱序，就好像它不在同一个 DIV 中一样。

代码中的 SASS 文本位于引号标记中，而不是“代码中”等。请注意，这是一个很长的媒体查询。

  <section class="more-info">
        <div class="feature">
          <div class="content">
            <p class="title">Lightweight</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <img src="images/sneakers.jpg" alt="a picture of sneakers">
        </div>

        <div class="feature left">
          <div class="content right">
            <p class="title">Lightweight</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <img class="img-left" src="images/shoe.jpg" alt="a picture of sneakers">
        </div>

/* ---- feature elements ---- */
  .feature {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 3em;
    margin-bottom: 8em;
  }
  .feature img {
    width: 25em;
  }
  .content {
    text-align: right;
    width: 25em;
  }
  .feature.left {
    grid-template-areas:
      "left right;"
  }
  .left img{
        grid-area: left;
  }
  .content {
      text-align: left;
      width: 25em;
      justify-self: left;
  }

  /* .feature.left {
    grid-template-areas:
      "left right";

         img {
             grid-area: left;
         }

         .content {
             text-align: left;
             width: 25em;
             justify-self: left;
         } */
}

使用了各种“网格/密集”或“flex”，以及与SASS相同的文本，但不起作用，只有“不支持的SASS”起作用，但我不能依赖于此。

注意：我确实尝试使用“内容类”而不是“.feature .left img”从另一个选项更改为“右”，因为两者都不起作用。

Answer 1

试试这个：

.feature.left { grid-template-areas: "left right";}

.feature.left img { grid-area: left; }

.feature.left .content {
   text-align: left;
   width: 25em;
   justify-self: left;
}