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 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
