Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

sass - How to convert it SCSS inline styles in your HTML

I have been working with quite a lot with Grafana. I have asked through support and different forums and unfortunate Grafana does not support external SCSS and that the only way to be able to use SCSS is to combine it with HTML. Meaning that I need to convert it into inline styles in my HTML which is:

<!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>

This is the code I have used for SCSS which works when it is external however since Grafana does not support it, I need to convert it....

@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;
    }
  }
}

My question is, how can I convert it into inline styles in my HTML?

question from:https://stackoverflow.com/questions/65641952/how-to-convert-it-scss-inline-styles-in-your-html

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Here is your converted 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>

How I converted it:

  1. Convert SCSS into CSS with jsonformatter.org/scss-to-css.
  2. Place CSS in <head><style></style></head> tags in your HTML.
  3. Run HTML in Premailer HTML styles inliner.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...