sass - Convert LESS to CSS and use it with Jekyll -

in previous post (how reset css styles div? (jekyll blog)) did ask timeline losses style when use jekyll site.

i did try iframe not solution mobile.

my timeline based on project: https://github.com/ybogdanov/history-timeline. timeline uses less provide styles.

the problem jekyll uses sass instead of css.

this modified less style works perfect 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 less css converter , 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 lines give me warning "unknown property" , styles missing when insert timeline using div.

what can do? wonder having readable text.

timeline iframe:

timeline div:

the original file use less indentation , should work sass, rename file , put in _sass folder, jekyll can build it.

mv styles.less timeline.scss && mv timeline.scss _sass 

create css/main.scss file with:

--- ---  @import "timeline"; 

in layout or include file, should link the generated main.css file:

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">