Convert LESS to CSS and use it with Jekyll - css

Question

In a previous post (How do I reset all css styles for a certain div? (Jekyll blog)) I did ask about a timeline that losses its style when I use it with my Jekyll site.
I did try to us an iframe but that is not a good solution for mobile.
My timeline is based on this project: https://github.com/ybogdanov/history-timeline. That timeline uses LESS to provide styles.
The problem is that Jekyll uses SASS instead of CSS.
This is my modified less style that works perfect with an iframe:
#content {
flex: 1;
overflow: scroll;
position: relative;
}
#ruler {
top: 0px;
height: 30px;
padding-top: 5px;
position: absolute;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: top 0.1s linear;
}
#chart {
margin-top: 35px;
}
svg {
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 18px;
}
}
I used a LESS to CSS converter and I get this:
#content {
flex: 1;
overflow: scroll;
position: relative;
}
#ruler {
top: 0px;
height: 30px;
padding-top: 5px;
position: absolute;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: top 0.1s linear;
}
#chart {
margin-top: 35px;
}
svg .axis path,
svg .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
svg .axis text {
font-family: sans-serif;
font-size: 18px;
}
But some lines give me a warning about "unknown property" and the styles are missing when I insert the timeline using a div.
What can I do? I only wonder about having a readable text.
Timeline with iframe:
Timeline with div:

Answer 1

The original file only use LESS for some indentation and should work with Sass, just rename the file and put it in the _sass folder, so that Jekyll can build it.
mv styles.less timeline.scss && mv timeline.scss _sass
Create a css/main.scss file with:
---
---
#import "timeline";
In your layout or your include file, you should link to the the generated main.css file:
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">