时间戳

首页 > 解决方案 > 如何在 HTML 中将其转换为 SCSS 内联样式

html - 如何在 HTML 中将其转换为 SCSS 内联样式

问题描述

我一直在与 Grafana 合作很多。我已经通过支持和不同的论坛询问过，不幸的是 Grafana 不支持外部 SCSS，并且能够使用 SCSS 的唯一方法是将它与 HTML 结合起来。这意味着我需要将其转换为我的 HTML 中的内联样式，即：

<!DOCTYPE HTML>
<html>

<body>

  <div class="grid">

    <div class="product">
      <div class="product-image">
        <a href="https://www.jdsports.se/product/nike-air-force-1-shadow-womens/393242_jdsportsse/" target="_blank">
          <img style="background-image:url(https://i.imgur.com/9pdOpoF.png);" />
        </a>
      </div>
      <div class="product-description">
        <h1>
          Nike Air Force 1 Shadow Womens sfg sdfg sdf gdfs sdf
        </h1>
        <div class="brand-wrapper">
          <span class="brand">(Jdsports)</span>
          <span class="id">ID 2200</span>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

这是我用于 SCSS 的代码，它在外部时可以工作，但是由于 Grafana 不支持它，我需要对其进行转换......

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap");

body {
  font-family: "Roboto", serif;
  background: #222;
  color: #fff;
}

.grid {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;

  .product {
    width: 99%;
    max-width: 333px;

    .product-image {
      height: 100%;
      max-width: 100%;
      max-height: 225px;
      

      a {
        img {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    .product-description {
      display: block;
      margin-top: 20px;
      max-width: 100%;
      align-items: center;

      h1 {
        display: -webkit-box;
        font-size: 1rem;
        text-align: center;
        text-transform: uppercase;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px;
        margin-bottom: 10px;
      }

      .brand-wrapper {
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        align-items: center;

        .brand {
          margin-bottom: 0.5rem;
        }
      }
    }

    margin-right: 1%;
    &:last-child {
      margin-right: 0;
    }
  }
}

我的问题是，如何将其转换为 HTML 中的内联样式？

标签： htmlsass

解决方案

这是您转换后的 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body style='background:#222; color:#fff; font-family:"Roboto", serif'>

  <div class="grid" style="display:flex; margin:0 auto; max-width:1200px">

    <div class="product" style="margin-right:0; max-width:333px; width:99%" width="99%">
      <div class="product-image" style="height:100%; max-height:225px; max-width:100%" height="100%">
        <a href="https://www.jdsports.se/product/nike-air-force-1-shadow-womens/393242_jdsportsse/" target="_blank">
          <img style="background-position:center; background-repeat:no-repeat; background-size:cover; height:100%; width:100%; background-image:url(https://i.imgur.com/9pdOpoF.png)" height="100%" width="100%">
        </a>
      </div>
      <div class="product-description" style="align-items:center; display:block; margin-top:20px; max-width:100%">
        <h1 style="-webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box; font-size:1rem; height:40px; margin-bottom:10px; overflow:hidden; text-align:center; text-overflow:ellipsis; text-transform:uppercase" height="40" align="center">
          Nike Air Force 1 Shadow Womens sfg sdfg sdf gdfs sdf
        </h1>
        <div class="brand-wrapper" style="-webkit-box-pack:center; -webkit-justify-content:center; align-items:center; display:flex; flex-direction:column; justify-content:center">
          <span class="brand" style="margin-bottom:0.5rem">(Jdsports)</span>
          <span class="id">ID 2200</span>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

我如何转换它：

  1. 使用jsonformatter.org/scss-to-css将 SCSS 转换为 CSS 。
  2. 将 CSS 放在<head><style></style></head>HTML 的标签中。
  3. 在Premailer HTML 样式 inliner中运行 HTML 。

推荐阅读